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

本文实例讲述了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>

父到子通过$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一个给“奶爸”然后通过“奶爸”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相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • AngularJS控制器controller给模型数据赋初始值的方法

    本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法.分享给大家供大家参考,具体如下: 之前的文章<AngularJS入门示例之Hello World详解>,很简单的就实现了模型数据和页面显示的自动绑定.现在我们使用控制器,给模型赋初始值.如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行 $("#target").attr("value",selfValue); 使用AngularJS代码如下: <!do

  • AngularJS控制器之间的数据共享及通信详解

    AngularJS 本身已经提供了像指令 Directive 和 服务 Service 一类的方式,来实现数据和代码的共享和复用,但在实际的项目开发中,或许是处于懒惰,亦或是为了便利,总会想在两个控制器之间,直接进行数据的共享通信,或者是函数与方法的调用,这里我们就看看有哪些方法可以满足这个要求. 单例服务 单例服务是 AngularJS 本身支持的数据和代码共享方式,因为是单例的,所有的控制器访问的便是同一份数据.比如,下面的 Service 便可以实现: angular .module('a

  • Angularjs中如何使用filterFilter函数过滤

    AngularJS的filter,中文名"过滤器"是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东.AngularJS中有一个filterFilter函数用来对集合过滤,非常方便. 源代码大致如下: function filterFilter(){ return function(aray, expression comparator){ if(!isArray(array)) return array; var comparatorType = typeof(co

  • AngularJS中控制器函数的定义与使用方法示例

    AngularJS中控制器函数的定义与使用方法示例

    本文实例讲述了AngularJS中控制器函数的定义与使用方法.分享给大家供大家参考,具体如下: HTML正文: <body ng-app="myApp" ng-controller="myCtrl"> <h2>AngularJS函数绑定</h2> <textarea ng-model="message" cols="40" rows="10"></tex

  • AngularJS控制器controller正确的通信的方法

    AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$ro

  • 详解AngularJS控制器的使用

    控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们只需要写构造函数即可.下面的例子展示了控制器初始化: function my Controller($scope){ $scope.msg="hello,world!"; } 上面这个创建控

  • AngularJS实现自定义指令与控制器数据交互的方法示例

    本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3

  • AngularJS中一般函数参数传递用法分析

    AngularJS中一般函数参数传递用法分析

    本文实例讲述了AngularJS中一般函数参数传递用法.分享给大家供大家参考,具体如下: 1. 模型参数 直接使用变量名,不要加引号 <!doctype html> <html ng-app="passAter"> <head> <meta charset="utf-8"/> </head> <body> <div ng-controller="passCtrl">

  • angularjs指令中的compile与link函数详解

    angularjs指令中的compile与link函数详解

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用到,而且建

  • AngularJS指令与控制器之间的交互功能示例

    本文实例讲述了AngularJS指令与控制器之间的交互功能.分享给大家供大家参考,具体如下: 本节我们来看控制器与指令之间的交互 1.首先来看最简单的,在指令中调用父控制器的方法: <div ng-controller="myController1"> </div> app.controller('myController1',['$scope',function($scope){ $scope.load=function(){ console.log('正在加

  • AngularJS控制器之间的通信方式详解

    本文实例讲述了AngularJS控制器之间的通信方式.分享给大家供大家参考,具体如下: 一.利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值:如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型. 基本类型 function San

随机推荐