zoukankan      html  css  js  c++  java
  • 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高级程序设计》

  • 相关阅读:
    java+opencv实现图像灰度化
    java实现高斯平滑
    hdu 3415 单调队列
    POJ 3368 Frequent values 线段树区间合并
    UVA 11795 Mega Man's Mission 状态DP
    UVA 11552 Fewest Flops DP
    UVA 10534 Wavio Sequence DP LIS
    UVA 1424 uvalive 4256 Salesmen 简单DP
    UVA 1099 uvalive 4794 Sharing Chocolate 状态DP
    UVA 1169uvalive 3983 Robotruck 单调队列优化DP
  • 原文地址:https://www.cnblogs.com/BestMePeng/p/AngularJS_Controller.html
Copyright © 2011-2022 走看看