mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
66 lines
2.7 KiB
Text
66 lines
2.7 KiB
Text
@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}
|