理解作用域（scope）

之前在做到party bid接受到的短信，实时更新到页面上的功能时，只是让页面刷新了一下，虽然功能可以实现，但是对angular的scope没有深入理解。

 

下面我们对angular的scope深入探讨一下：

 

1.什么是作用域

作用域是一个指向应用模型的对象。它是表达式的执行环境。作用域有层次结构，这个层次结构和相应的DOM几乎是一样的。作用域能监控表达式和传递事件。

 

2，作用域特点

• 作用域通过$watch来观察模型的变化。
• 作用域通过$apply将任何模型的改变从“AngularJS领域 ”通过系统映射到视图上。
• 作用域能通过共享模型成员的方式嵌套到应用组件上。一个作用域从父作用域继承属性。（这里涉及到js原型链的继承机制）
• 作用域提供表达式执行的上下文。比如说表达式{{name}}本身是无意义的，要放到指定name属性的作用域中

3.作为数据模型的作用域

作用域是控制器和视图之间的“胶水”（正如party bid第一张卡小结里的angular路由的示图）。在模板链接阶段，指令设置好作用域的$watch表达式。$watch使得指令能知晓属性的改变，这使得指令能重新渲染和更新DOM中的值。以下面的代码为例，来理解scope。

 

activityStart.html

 

<div ng-controller='ActivityStartCtrl'>
<header>
  活动报名 ({{applies.length}}人)
  <div class='header-right' ng-switch='switch'>
    <button ng-click='apply_start()' ng-disabled='flag' ng-switch-when='start'>开始</button>
    <button ng-click='apply_end()' ng-switch-when='end'>结束</button>
  </div>
</header>
<div>
  <ul id='applylist'>
    <li ng-repeat='apply in applies'>
          {{apply.applyname}}{{apply.phone}}
    </li>
  </ul>
</div>
</div>

 controller.js

 

angular.module('partyBidApp')
    .controller('ActivityStartCtrl', function ($scope, $routeParams) {
        $scope.activity_name = $routeParams.activity_name;
        $scope.applies = Apply.get_apply_list($scope.activity_name);
        $scope.switch = Apply.check_apply_status($scope.activity_name);
     
        $scope.apply_start = function () {
            $scope.switch = 'end';
        }
        $scope.apply_end = function () {
                $scope.switch = 'start';
            }
        }
    });

上例中，ActivityStartCtrl控制器分别将作用域（scope）的属性activity_name，applies，switch赋值，作用域将赋值的操作通知给相应的DOM，然后DOM重新渲染更新。这样控制器就将数据写入了作用域。

 

同样，控制器也能将行为添加到作用域，正如apply_start和apply_end方法，当点击开始或者结束按钮时，相应的作用域会更新。

 

现在，真正的问题来了，在contoller外面如何更新$scope.applies的值，因为我们把接受到的短信，实时更新到页面上。想要解决这个问题，需要先了解一下内容：

 

1).作用域是分层级的，类似DOM树。作用域和DOM相关联的时候，angular会自动给相应的DOM添加ng-scope类名。

2).从DOM中获取作用域，可以使用angular.element(‘这里是要选取的html元素’).scope()方法。

3).当浏览器调用angular上下文之外的js代码时，angular不知道模型的的更改的。要正确处理模型的更改，就要使用$apply方法进入angular的执行上下文。只有在$apply方法里执行的模型的修改才会正确地被angular处理。

 

这样，我们的更新信息的方法就有了。如下：

 

refreshMessage.js

Message.refresh_apply_messages=function(){
    var apply_messages=document.getElementById('applylist');//获取html元素
    var apply_messages_scope=angular.element(apply_messages).scope();//获取在该元素上的作用域
    apply_messages_scope.$apply(function(){
        apply_messages_scope.applies=Apply.get_apply_list(apply_messages_scope.activity_name);//调用scope下的$apply方法，进入到angular上下文，使angular处理scope的变化。
    });
}