AngularJSangular开发控制器之间的通信

相同、指令和控制器之间通信,无非是以下几种植方式:

  基于scope继承的主意
  基于event传播之法门
  service的法门(单例模式)

第二、基于scope继承的方:

  最简便易行的让控制器之间展开通信的措施是经scope的延续。假设发生一定量只控制器Parent、Child,Child
于 Parent 内,那Child
可以叫控制器Parent的分段控制器,它以继续父控制器Parent的scope。这样,Child就足以拜到Parent的scope中之有着函数和变量了。

  需要注意的凡,由于scope的连续是依据Js的原型继承,如果变量是基本项目的,那以Child中之改(写),有或会见造成Parent中之数变脏。

  例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于scope继承的方式</title>
</head>
<body ng-app = "myApp">
    <div ng-controller = "parent">
            <p>引用类型:{{obj.value}}</p>
            <p>引用类型:{{value}}</p>
            <a href="javascript:;" ng-click = "parent('parent')">点我</a>
        <div ng-controller="child">
            <p>引用类型:{{obj.value}}</p>
            <p>引用类型:{{value}}</p>
            <a href="javascript:;" ng-click = "child('child')">点我</a>            
        </div>
    </div>

    <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
    <script>
        var app = angular.module("myApp",[],function(){console.log("start")});
        app.controller("parent",function($scope){
            $scope.parent = function(newchild){
                // 这里不能都单独写成$scope.obj={value:newchild}
                $scope.obj={value:newchild};
                $scope.value = newchild;
            }
        });
        app.controller("child",function($scope){
            $scope.child = function(newchild){
                $scope.value = newchild;
                $scope.obj.value=newchild;
            }

        });
    </script>
</body>
</html>

其三、基于事件的措施:

  在相似情况下基于继续的法子已足足满足大部分场面了,但是这种措施没有落实兄弟控制器之间的通信方式,所以引出了风波的主意
。基于事件之法门遭到我们可以中作用的$on,$emit,$boardcast这几乎只措施来贯彻,其中$on表示事件监听,$emit表示于父级以上之
作用域触发事件, $boardcast代表向子级以下的作用域广播事件。

  分层及父 通过 $emit 注册事件,例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于事件传播子到父</title>
</head>
<body ng-app = "myApp">
    <h3>$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的 作用域触发事件, $boardcast表示向子级以下的作用域广播事件</h3>
    <div ng-controller = "parent">
            <p>引用类型:{{value}}</p>
        <div ng-controller="child">
            <a href="javascript:;" ng-click = "child('child')">子传值到父</a>            
        </div>
    </div>

    <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
    <script>
        var app = angular.module("myApp",[],function(){console.log("start")});
        app.controller("parent",function($scope){
            $scope.$on("pfan",function(e,data){
                $scope.value = data;
            })

        });
        app.controller("child",function($scope){
            $scope.child = function(newchild){
                $scope.value = newchild;
                $scope.$emit("pfan",$scope.value)
            }

        });
    </script>
</body>
</html>

  父到子通过$broadcast注册事件,但实际感觉微微多余,本事大就是可以共享给子的,例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于事件传播父到子</title>
</head>
<body ng-app = "myApp">
    <h3>$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的 作用域触发事件, $boardcast表示向子级以下的作用域广播事件</h3>

    基于事件传播父到子,这里本事父就可以到子,感觉有点多余
    <div ng-controller = "parent">
            <a href="javascript:;" ng-click = "parent('child')">子传值到父</a>    

        <div ng-controller="child">
            <p>引用类型:{{value}}</p>        
        </div>
    </div>

    <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
    <script>
        var app = angular.module("myApp",[],function(){console.log("start")});
        app.controller("parent",function($scope){
            $scope.parent = function(newchild){
                $scope.value = newchild;
                $scope.$broadcast("pfan",$scope.value)
            }

        });
        app.controller("child",function($scope){
            $scope.$on("pfan",function(e,data){
                $scope.value = data;
            })

        });
    </script>
</body>
</html>

  同级次

  拥有与个父scope的子级scope之间,也就算是弟兄/相邻scope之间的通信,其实是依共同父级传递消息的:

  子级scope中来谁想传消息了,$emit 一个深受“奶爸”
  然后经过“奶爸” $broadcast
给持有孩子这相同的消息,当然有消息之好可以选取是否要不经意掉好有的信

季、angular服务之方式:

  以ng中劳动是一个单例,所以在劳动中生成一个目标,该对象就是可行使依赖注入的法门以具备的控制器中共享。参照以下例子,在一个控制器修改了服务目标的值,在外一个控制器中拿走到修改后底价值:

var app = angular.module('myApp', []);
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 me</div>
</div>
<div ng-controller="sideCtrl">
    <div ng-click="add()">my name {{name}}</div>
</div>

 

 

参考资料:

  AngularJs开发——控制器间的通信

  angular开发
控制器之间的通信

  AngularJS:
使用Scope时的6个陷阱

相关文章