diff options
Diffstat (limited to 'docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc')
| -rw-r--r-- | docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc | 66 |
1 files changed, 0 insertions, 66 deletions
diff --git a/docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc b/docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc deleted file mode 100644 index aeab3191..00000000 --- a/docs/content/guide/dev_guide.scopes.understanding_scopes.ngdoc +++ /dev/null @@ -1,66 +0,0 @@ -@ngdoc overview -@name Developer Guide: Scopes: Understanding Scopes -@description - -Angular automatically creates a root scope during initialization, and attaches it to the page's -root DOM element (usually `<html>`). The root scope object, along with any of its child scope -objects, serves as the infrastructure on which your data model is built. The data model (JavaScript -objects, arrays, or primitives) is attached to angular scope properties. Angular binds the property -values to the DOM where bindings are specified in the template. Angular attaches any controller -functions you have created to their respective scope objects. - -<img src="img/guide/simple_scope_final.png"> - -Angular scopes can be nested, so a child scope has a parent scope upstream in the DOM. When you -display an angular expression in the view, angular walks the DOM tree looking in the closest -attached scope object for the specified data. If it doesn't find the data in the closest attached -scope, it looks further up the scope hierarchy until it finds the data. - -A child scope object inherits properties from its parents. For example, in the following snippet of -code, observe how the value of `name` changes, based on the HTML element it is displayed in: - -<doc:example> -<doc:source> - <ul ng-init="name='Hank'; names=['Igor', 'Misko', 'Gail', 'Kai']"> - <li ng-repeat="name in names"> - Name = {{name}}! - </li> - </ul> - <pre>Name={{name}}</pre> -</doc:source> -<doc:scenario> - it('should override the name property', function() { - expect(using('.doc-example-live').repeater('li').row(0)). - toEqual(['Igor']); - expect(using('.doc-example-live').repeater('li').row(1)). - toEqual(['Misko']); - - expect(using('.doc-example-live').repeater('li').row(2)). - toEqual(['Gail']); - expect(using('.doc-example-live').repeater('li').row(3)). - toEqual(['Kai']); - expect(using('.doc-example-live').element('pre').text()). - toBe('Name=Hank'); - }); -</doc:scenario> -</doc:example> - -The angular {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} directive creates a new scope for each -element that it repeats (in this example the elements are list items). In the `<ul>` element, we -initialized `name` to "Hank", and we created an array called `names` to use as the data source for -the list items. In each `<li>` element, `name` is overridden. Outside of the `<li>` repeater, the -original value of `name` is displayed. - -The following illustration shows the DOM and angular scopes for the example above: - -<img src="img/guide/dom_scope_final.png"> - - -## Related Topics - -* {@link dev_guide.scopes Angular Scope Objects} -* {@link dev_guide.scopes.internals Scopes Internals} - -## Related API - -* {@link api/angular.module.ng.$rootScope.Scope Angular Scope API} |
