AngularJS开发教程之控制器之间的通信方法分析

2024-05-06 15:04:12

字体：大中小

来源：转载

供稿：网友

本文实例讲述了AngularJS开发教程之控制器之间的通信方法。分享给大家供大家参考，具体如下：

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

基于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,on,emit,boardcast这几个方式来实现，其中boardcast这几个方式来实现，其中on表示事件监听，emit表示向父级以上的作用域触发事件，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>

上一篇：ES6概念 Symbol.keyFor()方法

下一篇：ES6概念 ymbol.for()方法