AngularJS中的控制器和作用域

欢迎大家指导与讨论 : )

  一、 作用域的事件传播

    一 . 1 修改的传播 

     关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的。简而言之,就是即时您只修改了某个作用域中的某个属性(比如说$scope.data),那么依赖于$scope.data的一些行为(参数含有$scope.data的一些函数),都会重新执行计算。比如下面的这个例子,每当 <input> 被输入不同的对象, getCountry(city) 就会再次计算。

<input ng-model="city" />
<p>The country is {{getCountry(city)}}</p>

      一 . 2 作用域间的通信

           在树上不同作用域之间要怎么样才能进行通信呢?有一种解决方案是:通过构建依赖于$rootScope的服务,可以在向全树的作用域广播事件($broadcast)。而事件的接受可以通过,在所需要的作用域上设定对应的事件接收器来完成。

app.service("EventEmitter", function($rootScope){
    return {
       emitEvent: function(eventType){
            $rootScope.$broadcast(eventType.name)
       }
    }
})

 

app.controller("myCtrl", ['$scope', function($scope){
     $scope.$on(someEvent. function(){
     //...
    })
}])

  二、 无作用域控制器

    我们可以通过创建无作用域的控制器,来使该控制器断绝所有与其他控制器的联系,它不能继承父作用域中的任何东西。但同时它还能继续向视图中提供数据和行为。

app.controller("myCtrl", function(){//不再依赖$scope
        this.data = "Hello World";
    this.sayHello = function(){
      console.log(this.data)
   }
})

   三、 与其他框架一起工作

    当我们需要将新功能集成到一个已有的产品或服务中,而这个产品或服务已经使用了一个不同的框架时,我们需要AngularJS和这些框架能够顺利地协同工作。

即:在AngularJS的环境中能够顺利调用其他框架,而在其他框架的环境中也要能够调用AngularJS环境中的东西。

    三 . 1 AngularJS中使用其他框架

     $apply或$watch 能够让事件进入到AngularJS的运行环境中,当这个事件产生变化时,AngularJS能够感知得到,并进行进一步处理(脏检查)。例子——在AngularJS中调用JQueryUI的API

$scope.$apply(function(){
    $('#jqui button').button({
       disabled: !disabled;
   })
})

    三. 2 在其他框架中调用AngularJS

      为了能在其他框架中调用AngularJS,我们需要进入到AngularJS环境。此处我们需要查找到对应关联元素所在的作用域,我们需要使用scope(),而不是$scope。

$document.ready(function(){
    $('#jqui button').button().click(function(e){
       angular.element(someEle).scope().$apply(function(){
           someHandler();
      })
   })
})

 

 

 

 

 

  参考资料

  《AngularJS高级程序设计》

posted @ 2016-03-03 17:54  BestMe丶  阅读(466)  评论(0编辑  收藏  举报