©
Dokumen ini menggunakanManual laman web PHP CinaLepaskan
A root scope can be retrieved using the $rootScope key from the $injector. Child scopes are created using the $new() method. (Most scopes are created automatically when compiled HTML template is executed.)
Here is a simple scope snippet to show how you can interact with the scope.
src="./test/ng/rootScopeSpec.js"tag="docs1"/>
A scope can inherit from a parent scope, as in this example:
varparent=$rootScope;varchild=parent.$new();parent.salutation="Hello";child.name="World";expect(child.salutation).toEqual('Hello');child.salutation="Welcome";expect(child.salutation).toEqual('Welcome');expect(parent.salutation).toEqual('Hello');
$rootScope.Scope([providers],[instanceCache]);
| 参数 | 类型 | 详述 |
|---|---|---|
| providers
(可选)
|
Object. |
Map of service factory which need to be provided for the current scope. Defaults to |
| instanceCache
(可选)
|
Object. |
Provides pre-instantiated services which should append/override services provided by |
| Object | Newly created scope. |
$new(isolate);
Creates a new child scope.
The parent scope will propagate the $digest() and $digest() events. The scope can be removed from the scope hierarchy using $destroy().
$destroy() must be called on a scope when it is desired for the scope and its child scopes to be permanently detached from the parent and thus stop participating in model change detection and listener notification by invoking.
| 参数 | 类型 | 详述 |
|---|---|---|
| isolate | boolean | If true, then the scope does not prototypically inherit from the parent scope. The scope is isolated, as it can not see parent scope properties. When creating widgets, it is useful for the widget to not accidentally read parent state. |
| Object | The newly created child scope. |
$watch(watchExpression,[listener],[objectEquality]);
Registers alistenercallback to be executed whenever thewatchExpressionchanges.
watchExpressionis called on every call to $digest() and should return the value that will be watched. (Since $digest() reruns when it detects changes thewatchExpressioncan execute multiple times per $digest() and should be idempotent.)listeneris called only when the value from the currentwatchExpressionand the previous call towatchExpressionare not equal (with the exception of the initial run, see below). Inequality is determined according to reference inequality, strict comparison via the!==Javascript operator, unlessobjectEquality==true(see next point)objectEquality==true, inequality of thewatchExpressionis determined according to theangular.equalsfunction. To save the value of the object for later comparison, theangular.copyfunction is used. This therefore means that watching complex objects will have adverse memory and performance implications.listenermay change the model, which may trigger otherlisteners to fire. This is achieved by rerunning the watchers until no changes are detected. The rerun iteration limit is 10 to prevent an infinite loop deadlock.If you want to be notified whenever $digest is called, you can register awatchExpressionfunction with nolistener. (SincewatchExpressioncan execute multiple times per $digest cycle when a change is detected, be prepared for multiple calls to your listener.)
After a watcher is registered with the scope, thelistenerfn is called asynchronously (via $evalAsync) to initialize the watcher. In rare cases, this is undesirable because the listener is called when the result ofwatchExpressiondidn't change. To detect this scenario within thelistenerfn, you can compare thenewValandoldVal. If these two values are identical (===) then the listener was called due to initialization.
The example below contains an illustration of using a function as your $watch listener
// let's assume that scope was dependency injected as the $rootScopevarscope=$rootScope;scope.name='misko';scope.counter=0;expect(scope.counter).toEqual(0);scope.$watch('name',Function(newValue,oldValue){scope.counter=scope.counter+1;});expect(scope.counter).toEqual(0);scope.$digest();// the listener is always called during the first $digest loop after it was registeredexpect(scope.counter).toEqual(1);scope.$digest();// but now it will not be called unless the value changesexpect(scope.counter).toEqual(1);scope.name='adam';scope.$digest();expect(scope.counter).toEqual(2);// Using a listener functionvarfood;scope.foodCounter=0;expect(scope.foodCounter).toEqual(0);scope.$watch(// This is the listener functionFunction(){returnfood;},// This is the change handlerFunction(newValue,oldValue){if(newValue!==oldValue){// Only increment the counter if the value changedscope.foodCounter=scope.foodCounter+1;}});// No digest has been run so the counter will be zeroexpect(scope.foodCounter).toEqual(0);// Run the digest but since food has not changed count will still be zeroscope.$digest();expect(scope.foodCounter).toEqual(0);// Update food and run digest. Now the counter will incrementfood='cheeseburger';scope.$digest();expect(scope.foodCounter).toEqual(1);
| 参数 | 类型 | 详述 |
|---|---|---|
| watchExpression | function()string | Expression that is evaluated on each $digest cycle. A change in the return value triggers a call to the
|
| listener
(可选)
|
function()= | Callback called whenever the return value of the
|
| objectEquality
(可选)
|
boolean | Compare for object equality using |
| function() | Returns a deregistration function for this listener. |
$watchGroup(watchExpressions,listener);
A variant of $watch() where it watches an array ofwatchExpressions. If any one expression in the collection changes thelisteneris executed.
watchExpressionsarray are observed via standard $watch operation and are examined on every call to $digest() to see if any items changes.listeneris called whenever any expression in thewatchExpressionsarray changes.| 参数 | 类型 | 详述 |
|---|---|---|
| watchExpressions | Array. |
Array of expressions that will be individually watched using $watch() |
| listener | function(newValues, oldValues, scope) | Callback called whenever the return value of any expression in |
| function() | Returns a de-registration function for all listeners. |
$watchCollection(obj,listener);
Shallow watches the properties of an object and fires whenever any of the properties change (for arrays, this implies watching the array items; for object maps, this implies watching the properties). If a change is detected, thelistenercallback is fired.
objcollection is observed via standard $watch operation and is examined on every call to $digest() to see if any items have been added, removed, or moved.listeneris called whenever anything within theobjhas changed. Examples include adding, removing, and moving items belonging to an object or array.$scope.names=['igor','matias','misko','james'];$scope.dataCount=4;$scope.$watchCollection('names',Function(newNames,oldNames){$scope.dataCount=newNames.length;});expect($scope.dataCount).toEqual(4);$scope.$digest();//still at 4 ... no changesexpect($scope.dataCount).toEqual(4);$scope.names.pop();$scope.$digest();//now there's been a changeexpect($scope.dataCount).toEqual(3);
| 参数 | 类型 | 详述 |
|---|---|---|
| obj | stringfunction(scope) | Evaluated as expression. The expression value should evaluate to an object or an array which is observed on each $digest cycle. Any shallow change within the collection will trigger a call to the |
| listener | function(newCollection, oldCollection, scope) | a callback function called when a change is detected.
|
| function() | Returns a de-registration function for this listener. When the de-registration function is executed, the internal watch operation is terminated. |
$digest();
Processes all of the watchers of the current scope and its children. Because a watcher's listener can change the model, the$digest()keeps calling the watchers until no more listeners are firing. This means that it is possible to get into an infinite loop. This function will throw'Maximum iteration limit exceeded.'if the number of iterations exceeds 10.
Usually, you don't call$digest()directly in controllers or in directives. Instead, you should call $apply() (typically from within a Directive), which will force a$digest().
If you want to be notified whenever$digest()is called, you can register awatchExpressionfunction with $watch() with nolistener.
In unit tests, you may need to call$digest()to simulate the scope life cycle.
varscope=...;scope.name='misko';scope.counter=0;expect(scope.counter).toEqual(0);scope.$watch('name',Function(newValue,oldValue){scope.counter=scope.counter+1;});expect(scope.counter).toEqual(0);scope.$digest();// the listener is always called during the first $digest loop after it was registeredexpect(scope.counter).toEqual(1);scope.$digest();// but now it will not be called unless the value changesexpect(scope.counter).toEqual(1);scope.name='adam';scope.$digest();expect(scope.counter).toEqual(2);
$destroy();
Removes the current scope (and all of its children) from the parent scope. Removal implies that calls to $digest() will no longer propagate to the current scope and its children. Removal also implies that the current scope is eligible for garbage collection.
The$destroy()is usually used by directives such as ngRepeat for managing the unrolling of the loop.
Just before a scope is destroyed, a$destroyevent is broadcasted on this scope. Application code can register a$destroyevent handler that will give it a chance to perform any necessary cleanup.
Note that, in AngularJS, there is also a$destroyjQuery event, which can be used to clean up DOM bindings before an element is removed from the DOM.
$eval([expression],[locals]);
Executes theexpressionon the current scope and returns the result. Any exceptions in the expression are propagated (uncaught). This is useful when evaluating Angular表达式s.
varscope=ng.$rootScope.Scope();scope.a=1;scope.b=2;expect(scope.$eval('a+b')).toEqual(3);expect(scope.$eval(Function(scope){returnscope.a+scope.b;})).toEqual(3);
| 参数 | 类型 | 详述 |
|---|---|---|
| expression
(可选)
|
stringfunction() | An Angular表达式 to be executed.
|
| locals
(可选)
|
Object | Local variables object, useful for overriding values in scope. |
| * | The result of evaluating the expression. |
$evalAsync([expression]);
Executes the expression on the current scope at a later point in time.
The$evalAsyncmakes no guarantees as to when theexpressionwill be executed, only that:
expressionexecution.Any exceptions from the execution of the expression are forwarded to the $exceptionHandler service.
注意:if this function is called outside of a$digestcycle, a new$digestcycle will be scheduled. However, it is encouraged to always call code that changes the model from within an$applycall. That includes code evaluated via$evalAsync.
| 参数 | 类型 | 详述 |
|---|---|---|
| expression
(可选)
|
stringfunction() | An Angular表达式 to be executed.
|
$apply([exp]);
$apply()is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.
$apply()Function$apply(expr){try{return$eval(expr);}catch(e){$exceptionHandler(e);}finally{$root.$digest();}}
Scope's$apply()method transitions through the following stages:
| 参数 | 类型 | 详述 |
|---|---|---|
| exp
(可选)
|
stringfunction() | An Angular表达式 to be executed.
|
| * | The result of evaluating the expression. |
$on(名称,listener);
Listens on events of a given type. See $emit for discussion of event life cycle.
The event listener function format is:Function(event,args...). Theeventobject passed into the listener has the following attributes:
targetScope-{Scope}: the scope on which the event was$emit-ed or$broadcast-ed.currentScope-{Scope}: the scope that is currently handling the event. Once the event propagates through the scope hierarchy, this property is set to null.名称-{string}: name of the event.stopPropagation-{Function=}: callingstopPropagationfunction will cancel further event propagation (available only for events that were$emit-ed).preventDefault-{Function}: callingpreventDefaultsetsdefaultPreventedflag to true.defaultPrevented-{boolean}: true ifpreventDefaultwas called.| 参数 | 类型 | 详述 |
|---|---|---|
| name | string | Event name to listen on. |
| listener | function(event, ...args) | Function to call when the event is emitted. |
| function() | Returns a deregistration function for this listener. |
$emit(名称,args);
Dispatches an event名称upwards through the scope hierarchy notifying the registered$rootScope.Scopelisteners.
The event life cycle starts at the scope on which$emitwas called. All listeners listening for名称event on this scope get notified. Afterwards, the event traverses upwards toward the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.
Any exception emitted from the listeners will be passed onto the $exceptionHandler service.
| 参数 | 类型 | 详述 |
|---|---|---|
| name | string | Event name to emit. |
| args | * | Optional one or more arguments which will be passed onto the event listeners. |
| Object | Event object (see |
$broadcast(名称,args);
Dispatches an event名称downwards to all child scopes (and their children) notifying the registered$rootScope.Scopelisteners.
The event life cycle starts at the scope on which$broadcastwas called. All listeners listening for名称event on this scope get notified. Afterwards, the event propagates to all direct and indirect scopes of the current scope and calls all registered listeners along the way. The event cannot be canceled.
Any exception emitted from the listeners will be passed onto the $exceptionHandler service.
| 参数 | 类型 | 详述 |
|---|---|---|
| name | string | Event name to broadcast. |
| args | * | Optional one or more arguments which will be passed onto the event listeners. |
| Object | Event object, see |
Broadcasted when a scope and its children are being destroyed.
Note that, in AngularJS, there is also a$destroyjQuery event, which can be used to clean up DOM bindings before an element is removed from the DOM.
$id