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必须要清楚父子级以及作用域的范围。

原文地址:https://www.cnblogs.com/shirly77/p/6647257.html