AngularJS控制器controller之间如何通信
angular控制器通信的方式有三种:
1,利用作用域继承的方式。即子控制器继承父控制器中的内容
2,基于事件的方式。即$on,$emit,$boardcast这三种方式
3,服务方式。写一个服务的单例然后通过注入来使用
利用作用域的继承方式
由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值;如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型。
基本类型
- function Sandcrawler($scope) {
-
- $scope.location = "Mos Eisley North";
-
- $scope.move = function(newLocation) {
-
- $scope.location = newLocation;
-
- }
-
- };
-
- function Droid($scope) {
-
- $scope.sell = function(newLocation) {
-
- $scope.location = newLocation;
-
- }
-
- }
-
- // html
-
- "Sandcrawler">
-
- <p>Location: p>
-
- <button ng-click="move('Mos Eisley South')">Movebutton>
-
- <div ng-controller="Droid">
-
- <p>Location: p>
-
- <button ng-click="sell('Owen Farm')">Sellbutton>
-
- div>
基于事件的方式
在一般情况下基于继承的方式已经足够满足大部分情况了,但是这种方式没有实现兄弟控制器之间的通信方式,所以引出了事件的方式。基于事件的方式中我们可以利用$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的作用域触发事件, $boardcast表示向子级以下的作用域广播事件。
angular服务的方式
在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。
- var app = angular.module('myApp', []);
-
- //使用factory API创建服务instance
-
- app.factory('instance', function(){
-
- return {};
-
- });
-
- app.controller('MainCtrl', function($scope, instance) {
-
- $scope.change = function() {
-
- instance.name = $scope.test;
-
- };
-
- });
-
- app.controller('sideCtrl', function($scope, instance) {
-
- $scope.add = function() {
-
- $scope.name = instance.name;
-
- };
-
- });
-
- //html
-
- <div ng-controller="MainCtrl">
-
- <input type="text" ng-model="test" />
-
- <div ng-click="change()">click mediv>
注:本文转载自blog.csdn.net的No Silver Bullet的文章"http://blog.csdn.net/sunhuaqiang1/article/details/49950813#t3"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
评论记录:
回复评论: