AngularJS开发教程之控制器之间的通信方法分析  更新时间:2016年12月25日 11:03:56   作者:小小平凡世界   这篇文章主要介绍了AngularJS开发教程之控制器之间的通信方法,结合实例形式较为详细的分析了AngularJS控制器之间通信的三种常用方式及相关使用技巧,需要的朋友可以参考下 本文实例讲述了AngularJS开发教程之控制器之间的通信方法。分享给大家供大家参考,具体如下: 一、指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二、基于scope继承的方式: 最简单的让控制器之间进行通信的方法是通过scope的继承。假设有两个控制器Parent、Child,Child 在 Parent 内,那Child 可以称为控制器Parent的子控制器,它将继承父控制器Parent的scope。这样,Child就可以访问到Parent的scope中的所有函数和变量了。 需要注意的是,由于scope的继承是基于Js的原型继承,如果变量是基本类型的,那在Child中的修改(写),有可能会导致Parent中的数据变脏。 例子: 基于scope继承的方式 引用类型:{{obj.value}} 引用类型:{{value}} 点我 引用类型:{{obj.value}} 引用类型:{{value}} 点我 三、基于事件的方式: 在一般情况下基于继承的方式已经足够满足大部分情况了,但是这种方式没有实现兄弟控制器之间的通信方式,所以引出了事件的方式 。基于事件的方式中我们可以里面作用的on,on,emit,boardcast这几个方式来实现,其中boardcast这几个方式来实现,其中on表示事件监听,emit表示向父级以上的作用域触发事件,emit表示向父级以上的作用域触发事件,boardcast表示向子级以下的作用域广播事件。 子到父 通过 $emit 注册事件,例子: 基于事件传播子到父 $on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的 作用域触发事件, $boardcast表示向子级以下的作用域广播事件 引用类型:{{value}} 子传值到父 父到子通过$broadcast注册事件,但其实感觉有点多余,本事父就是可以共享给子的,例子: 基于事件传播父到子 $on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的 作用域触发事件, $boardcast表示向子级以下的作用域广播事件 基于事件传播父到子,这里本事父就可以到子,感觉有点多余 子传值到父 引用类型:{{value}} 同级之间 拥有同个父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: click me my name {{name}} 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: 利用VS Code开发你的第一个AngularJS 2应用程序 Angularjs单选改为多选的开发过程及问题解析 AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】 基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析 Ubuntu系统下Angularjs开发环境安装 总结AngularJS开发者最常犯的十个错误 利用Angularjs和Bootstrap前端开发案例实战 AngularJS应用开发思维之依赖注入3 angularJS开发注意事项 AngularJS 控制器 通信 相关文章 Angular实现搜索框及价格上下限功能 这篇文章主要为大家详细介绍了Angular实现搜索框及价格上下限功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2018-01-01 AngularJS表单验证中级篇(3) 这篇文章主要为大家详细介绍了AngularJS表单验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-09-09 AngularJS实现的省市二级联动功能示例【可对选项实现增删】 这篇文章主要介绍了AngularJS实现的省市二级联动功能,涉及事件监听、响应及页面元素动态操作相关技巧,此外还具备对选项进行增删的功能,需要的朋友可以参考下 2017-10-10 angular 动态组件类型详解(四种组件类型) 这篇文章给大家讲解四种组件类型,非常不错,具有参考借鉴价值,对angular 动态组件类型感兴趣的朋友参考下吧 2017-02-02 Angular4开发解决跨域问题详解 本篇文章主要介绍了Angular4开发解决跨域问题详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 AngularJs页面筛选标签小功能 AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。本文重点给大家介绍AngularJs页面筛选标签小功能,非常不错,需要的朋友可以参考下 2016-08-08 AngularJS中的指令全面解析(必看) 下面小编就为大家带来一篇AngularJS中的指令全面解析(必看)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-05-05 AngularJS常见过滤器用法实例总结 这篇文章主要介绍了AngularJS常见过滤器用法,结合实例形式总结分析了AngularJS大小写过滤器、货币过滤器、日期过滤器、limitTo过滤器、orderBy过滤器及自定义过滤器使用方法,需要的朋友可以参考下 2017-07-07 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件 这篇文章主要为大家详细介绍了仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件的相关资料,感兴趣的小伙伴们可以参考一下 2016-07-07 浅谈Angular2 模块懒加载的方法 本篇文章主要介绍了浅谈Angular2 模块懒加载的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 最新评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • 利用VS Code开发你的第一个AngularJS 2应用程序
  • Angularjs单选改为多选的开发过程及问题解析
  • AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
  • 基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
  • Ubuntu系统下Angularjs开发环境安装
  • 总结AngularJS开发者最常犯的十个错误
  • 利用Angularjs和Bootstrap前端开发案例实战
  • AngularJS应用开发思维之依赖注入3
  • angularJS开发注意事项
张贴在3