Angular JS - $scope

Posted on 2017-08-25 Edited on 2017-09-29

~~Edit~~

$scope

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

简单说$scope用来做interpolation。

angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
  $scope.username = 'World';
  $scope.sayHello = function() {
    $scope.greeting = 'Hello ' + $scope.username + '!';
  };
}]);

When AngularJS evaluates {{name}}, it first looks at the scope associated with the given element for the name property. If no such property is found, it searches the parent scope and so on until the root scope is reached. In JavaScript this behavior is known as prototypical inheritance, and child scopes prototypically inherit from their parents.

这里很重要。比如下面的code

<ul>
    <li ng-repeat="item in $ctrl.items"
        ui-sref="itemList.itemDetail({itemId: $index})">
        {{ item.name }}
        <ui-view></ui-view>
    </li>
</ul>

相应的ui-view用下面的模板。虽然在该ui-view的scope里没有item，但是按着原型链往上寻找，会在上一级的template中找到该属性。

<ul ng-if="itemDetail.id == item.id">
    <li>Price: {{ item.price_large |  currency }}</li>
    <li>Description: {{ item.description }}</li>
</ul>

Scope Hierarchies

Where does Scope come from?

Each AngularJS application has exactly one root scope, but may have any number of child scopes. The location where the root scope is attached to the DOM is defined by the location of ng-app directive.
ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element.
Component directives, which are created with the .component() helper always create an isolate scope.

Retrieving Scopes from the DOM.

To examine the scope in the debugger:
Right click on the element of interest in your browser and select ‘inspect element’. You should see the browser debugger with the element you clicked on highlighted.
The debugger allows you to access the currently selected element in the console as $0 variable.
To retrieve the associated scope in console execute: angular.element($0).scope()

The scope() function is only available when $compileProvider.debugInfoEnabled() is true (which is the default).

$scope and controller

In AngularJS, a Controller is defined by a JavaScript constructor function that is used to augment the AngularJS Scope.
Use controllers to:
Set up the initial state of the $scope object.
Add behavior to the $scope object.

可见controller就是被设计用来操作scope的，

Scopes and controllers interact with each other in the following situations:
Controllers use scopes to expose controller methods to templates (see ng-controller).
Controllers define methods (behavior) that can mutate the model (properties on the scope).
Controllers may register watches on the model. These watches execute immediately after the controller behavior executes.

controller通过inject来得到AngularJS为其创建的Scope实例。

angular.module('scopeExample', [])
.controller('MyController', MyController)
MyController.$inject = ['$scope']
function MyController($scope) {
  $scope.username = 'World';
}

$digest

How to setup watchers?

$scope.$watch – don’t do this in a controller <==因为Angular已经帮我们设计好了，下面两个途径就是自动的watcher
{{ someProp }}
 <input … ng-model=”someProp”>

可以用$scope.$$watcherCount, $scope.$$atchers两个内部变量看到该$scope的watchers的状态

$digest vs. $apply

Digest Cycle does not get triggered automatically if events are unaware of Angular
Solution:
•  Call $digest after your custom code
•  Wrap your custom code inside of $apply
•  Find Angular specific service that handles the same functionality, e.g., $timeout

针对这三种情况，给出下面的sample code

$scope.upCounter = function () {
  setTimeout(function () {
    $scope.counter++;
    console.log("Counter incremented!");
    $scope.$digest();
  }, 2000);
};

$scope.upCounter = function () {
  setTimeout(function () {
    $scope.$apply(function(){
      $scope.counter++;
      console.log("Counter incremented!");
    })
  }, 2000);
};

$scope.upCounter = function () {
  $timeout(function () {
    $scope.counter++;
    console.log("Counter incremented!");
  }, 2000);
};

Big Ben