zoukankan      html  css  js  c++  java
  • angular开发控制器之间的通信

    一、指令与控制器之间通信,无非是以下几种方法:

      基于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个陷阱

  • 相关阅读:
    [HNOI 2017]影魔
    [HNOI 2016]树
    [HNOI 2011]卡农
    [SCOI 2016]美味
    [SDOI 2011]染色
    [HNOI 2016]最小公倍数
    eclipse实现热部署和热加载
    mysql中时间比较的实现
    如何把本地项目部署到服务器上
    Linux部署项目和常用命令
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/5043880.html
Copyright © 2011-2022 走看看