AngularJS中的控制器和作用域

Posted 2020-06-17 BestMe丶

欢迎大家指导与讨论 : ）

　　一、 作用域的事件传播

　　　　一 . 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高级程序设计》