• angular的继承作用域通信


    本人学了一段时间的angular,angular之间怎样通信,我就总结以下几点,如果有哪位大神认为不对,敬请赐教。

    1、父子之间的作用域进行通信

    html

    <div ng-controller="Parent">

      {{name}}                                //Parent
      <div ng-controller="child">
        {{name}}                          //Parent
      </div>
    </div>

    js

    m1.controller("Parent",["$scope",function($scope){

      $scope.name = "Parent";
    }])
    m1.controller("child",["$scope",function($scope){

    }])

    2、$rootScope 挂在全局作用域上,适用范围更广

    html

    <div ng-controller="myCtrl">

      {{name}}                                  //Parent
      <div ng-controller="Parent">
        {{name}}                            //Parent
        <div ng-controller="child">
          {{name}}                      //Parent
        </div>
      </div>

    </div>

    js

    m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
      $scope.name = "Parent";
      $rootScope.name = $scope.name;
    }])
    m1.controller("child",["$scope",function($scope){
    }])

     3、基于事件的数据传递  组件 webcomponent

    html

    <div ng-controller="Parent">

      <input type="text" ng-model="name" ng-change="change()">  
      <div ng-controller="child">
        <input type="text" ng-model="name" ng-change="change()">   
      </div>
      <div ng-controller="secChild">
        <input type="text" ng-model="name">
      </div>
    </div>

    js

    m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){

      // 监听 发送消息  $emit
      $scope.$on("changeName",function(event,data){
        console.log(data);
        //$broadcast 广播 广播只有子级和自己知道,父级(就是Parent更上级)不知道
        $scope.$broadcast("sendName",data);
      })

      //监听 $broadcast 广播发送的消息 

      $scope.$on("sendName",function(event,data){
        console.log(data);
        $scope.name = data;
       })
    }])
    m1.controller("child",["$scope",function($scope){
      $scope.name = "第一个孩子";
      $scope.change = function(){
        //$emit 发送 只能发送自己的父级
        $scope.$emit("changeName","发送-》广播");
      }

      //监听 $broadcast 广播发送的消息
       $scope.$on("sendName",function(event,data){
        console.log(data);
        $scope.name = data;
       })
    }])
    m1.controller("secChild",["$scope",function($scope){
      $scope.name = "第二个孩子";

      //监听 $broadcast 广播发送的消息
      $scope.$on("sendName",function(event,data){
        console.log(data);
        $scope.name = data;
      })
    }])

    总结:$emit 发送消息,只能发送给自己的父级或者更上级(如:爷爷级),使用监听($on(监听的名字,function(event,data){ }))就能收到,自己以及自己的子级都不能发送;

    $broadcast 广播消息 ,只能被自己或是自己的子级所监听($on(监听的名字,function(event,data){ }))的到,父级或者更上级不能监听的到

    4、service 没有作用域的概念

    html

    <body ng-controller="myCtrl">
      <input type="text" ng-model="name" >
      <div ng-controller="Parent">
        <input type="text" ng-model="name" >
        <div ng-controller="child">
          <input type="text" ng-model="name" ng-change="change()">
        </div>
        <div ng-controller="secChild">
          <input type="text" ng-model="name">
        </div>
      </div>
    </body>

    js

    m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
    }])
    m1.controller("child",["$scope","myData",function($scope,myData){

      //为什么 $scope.name = myData.name;  不能使上面的联动改变呢

      //据我所知,我觉得 上面的 $scope.name 是赋值,物理地址也是一样的,就算html中<input>标签都有里面 ng-model="name",

        //这样是不会联动的,也就是说多个controller里面的物理地址不一样,

      //如果是引用myData$scope.data = myData; html中<input>标签都有里面 ng-model="name",只是引用其中的数据,其他

      //包括物理地址都不变,这样就可以联动
      $scope.data = myData;
    }])
    m1.controller("secChild",["$scope","myData",function($scope,myData){

      //为什么 $scope.name = myData.name;  不能使上面的联动改变呢
      $scope.data = myData;
    }])
    m1.factory("myData",function(){
      return{
        name : "123"
      }
    })

    总结:service与$emit、$broadcast、$on的区别,service没有作用域的概念;$emit、$broadcast、$on必须要清楚父子级以及作用域的范围。

  • 相关阅读:
    纪念又一次ak
    hdu5618
    bzoj3393
    bzoj3438
    [JSOI2007]建筑抢修
    [CQOI2014]数三角形
    [BZOJ2662][BeiJing wc2012]冻结
    [NOIP2015]运输计划
    [ZJOI2006]超级麻将
    [APIO2009]抢掠计划
  • 原文地址:https://www.cnblogs.com/shirly77/p/6647257.html
Copyright © 2020-2023  润新知