角中广播和发出的美元使用方法详解

  

要在控制器之间传递变量变化需要使用角中广播和美元的发出方法来传递,同时使美元用在来接收事件并作出响应。

  

播出译为广播,即上级传递下级。
  

  

示例代码:

        & lt;脚本src=" https://www.yisu.com/angular.js "祝辞& lt;/script>   & lt; script>   角。模块(“应用程序”,[])   范式(“孩子”,函数(范围){   美元的范围。美元(“parentChange函数(e, m) {   美元的范围。改变=案谋洹?   美元的范围。孩子=m;   })   })   范式(“父”,函数(范围){   美元的范围。看美元(“父”、功能(n, o) {   如果(n==o) {   返回;   }   美元的范围。广播(“parentChange”, n)美元   })   })   & lt;/script>      & lt; body>   & lt; div ng-controller=案浮北?   父:{{父母}}   & lt;输入类型=拔谋尽眓g-model=案浮北?      & lt; div ng-controller=昂⒆印北?   {{改变}}孩子:{{孩子}}   & lt;/div>   & lt;/div>   & lt;/body>   之前      

上述代码使用美元看监听父母的值的变化,当发生变化时就会“广播”出parentChange事件并传递了参数(输入框的值),此时子元素作用域中使用了美元范围。美元(“parentChange处理程序)”来接收parentChange事件,然后接受输入框的值并赋值给子作用域中的孩子变量。这样就完成了值的传递。

  

效果:
  

  

角中广播和发出的美元使用方法详解

  

发出译为发射,即下级传递上级。
  

  

示例代码:

        & lt;脚本src=" https://www.yisu.com/angular.js "祝辞& lt;/script>   & lt; script>   角。模块(“应用程序”,[])   范式(“父”,函数(范围){   美元的范围。美元(“childChange函数(e, m) {   美元的范围。改变=案谋洹?   美元的范围。父母=m   })   })   范式(“孩子”,函数(范围){   美元的范围。看美元(“孩子”,函数(n, o) {   如果(n==o) {   返回;   }   美元的范围。发出(“childChange”, n)美元   })   })   & lt;/script>         & lt;身体ng-controller=案浮北?   {{改变}}父:{{父母}}   & lt; div ng-controller=昂⒆印北?   孩子:{{孩子}}   & lt;输入类型=拔谋尽眓g-model=昂⒆印北?   & lt;/div>   & lt;/body>      之前      

当子元素的孩子值发生变化时,会向上级发出childChange事件,此时父元素正在监听的对美元(“childChange”)会做出响应,将传递的参数赋值给家长,整个流程与广播类似。

  

效果:
  

  

角中广播和发出的美元使用方法详解

  

上述作用域均存在层级关系,如果对于同级的作用域该如何做呢?

  

我们可以使用服务来广播事件:

        & lt;脚本src=" https://www.yisu.com/angular.js "祝辞& lt;/script>   & lt; script>   角。模块(“应用程序”,[])   .service (“myServive函数(rootScope美元){   返回{   变化:函数(n) {   rootScope美元。美元广播(“valueChange”, n);      }   }   })   范式(“bro1函数(范围、myServive) {   美元的范围。看美元(“value1函数(n) {   myServive.change (n);   })      美元的范围。美元(“valueChange函数(e, m) {   console.log (“value1”);   美元的范围。value1=m;   })   })   范式(“bro2函数(范围、myServive) {   美元的范围。美元的手表(value2,函数(n) {   myServive.change (n);   })      美元的范围。美元(“valueChange函数(e, m) {   console.log (“value2”);   美元的范围。value2=m;   })   })   & lt;/script>         & lt; body>   & lt; div ng-controller=癰ro1”比;   & lt; h4>value1: & lt;/h4>   & lt;输入类型=拔谋尽眓g-model=皏alue1”比;   & lt;/div>   & lt; div ng-controller=癰ro2”比;   & lt; h4> value2: & lt;/h4>   & lt;输入类型=拔谋尽眓g-model=value2”比;   & lt;/div>   & lt;/body>      之前      

我们在服务中运用了rootScope美元,所有的作用域都从属于它,基于这点,我们可以在根作用域中广播事件,rootScope美元。广播(“valueChange”, n);美元,当每个子作用域中的值发生变化时我们都会调用服务中变化的方法来广播这个事件,同时每个作用域又都在监听在美元(“valueChange”)事件并作出相应处理,这样就实现了子作用域中的值会传递给兄弟作用域了。

角中广播和发出的美元使用方法详解