Angularjs的Controller间通信机制实例分析

本文实例讲述了Angularjs的Controller间通信机制。分享给大家供大家参考，具体如下：

在Angularjs开发一些经验总结中提到我们需要按照业务区分angular controller，避免过大无所不能的上帝controller，我们把controller分离开了，但是有时候我们需要在controller中通信，一般为比较简单的通信机制，告诉同伴controller我的某个你所关心的东西改变了，怎么办？如果你是一个javascript程序员你会很自然的想到异步回调响应式通信—事件机制(或消息机制)。对，这就是angularjs解决controller之间通信的机制，所推荐的唯一方式，简而言之这就是angular way。

Angularjs为在scope中为我们提供了冒泡和隧道机制，$broadcast会把事件广播给所有子controller，而$emit则会将事件冒泡传递给父controller，$on则是angularjs的事件注册函数，有了这一些我们就能很快的以angularjs的方式去解决angularjs controller之间的通信，代码如下：

View:

<div ng-app="app" ng-controller="parentCtr">
  <div ng-controller="childCtr1">name :
    <input ng-model="name" type="text" ng-change="change(name);" />
  </div>
  <div ng-controller="childCtr2">Ctr1 name:
    <input ng-model="ctr1Name" />
  </div>
</div>

Controller:

angular.module("app", []).controller("parentCtr",
function ($scope) {
  $scope.$on("Ctr1NameChange",
  function (event, msg) {
    console.log("parent", msg);
    $scope.$broadcast("Ctr1NameChangeFromParrent", msg);
  });
}).controller("childCtr1", function ($scope) {
  $scope.change = function (name) {
    console.log("childCtr1", name);
    $scope.$emit("Ctr1NameChange", name);
  };
}).controller("childCtr2", function ($scope) {
  $scope.$on("Ctr1NameChangeFromParrent",
  function (event, msg) {
    console.log("childCtr2", msg);
    $scope.ctr1Name = msg;
  });
});

这里childCtr1的name改变会以冒泡传递给父controller，而父controller会对事件包装在广播给所有子controller，而childCtr2则注册了change事件，并改变自己。注意父controller在广播时候一定要改变事件name。

jsfiddle链接：http://jsfiddle.net/whitewolf/5JBA7/15/

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

赞 (0)

相关推荐

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

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

  • AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    Controller的创建 AngularJs controller使用无处不在,在里代码演示比较简单的创建工作. <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset

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

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

  • angularJS+requireJS实现controller及directive的按需加载示例

    最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: 思路如下 1.借助ui-router里面的resolve属性来实现预加载 2.需要借助$controllerProvider动态去注册控制器,$compileProvider动态去注册指令 3.需要借助$q来帮助我们实现异步加载,具体步骤如下所示: 1.在我们定义的app(在定义app.confi

  • AngularJS利用Controller完成URL跳转

    具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button

  • 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo

  • AngularJS 控制器 controller的详解

    AngularJS 控制器 controller的详解 一.控制器概念 控制器在Angualrjs 中的作用是增强视图,并且是一个函数,用来向视图的作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个新的控制器是,angularjs会生成并传递一个新的$scope给这个控制器.可以在这个控制器里初始化$scope,由于angularjs会负责处理控制器的实例化过程. 列子: var app=angular.module("myApp",

  • Angularjs中controller的三种写法分享

    前言 在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中controller其实就是一个方法,它有三种写法,下面来一起看看吧. 第一种: <pre name="code" class="javascript">var AppController = ['$scope', function($scope){ $sco

  • AngularJS实现controller控制器间共享数据的方法示例

    AngularJS实现controller控制器间共享数据的方法示例

    本文实例讲述了AngularJS实现controller控制器间共享数据的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myapp"> <head> <title>www.jb51.net 控制器间共享数据</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.co

  • Angularjs的Controller间通信机制实例分析

    本文实例讲述了Angularjs的Controller间通信机制.分享给大家供大家参考,具体如下: 在Angularjs开发一些经验总结中提到我们需要按照业务区分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需要在controller中通信,一般为比较简单的通信机制,告诉同伴controller我的某个你所关心的东西改变了,怎么办?如果你是一个javascript程序员你会很自然的想到异步回调响应式通信-事件机

  • Android 图片的三级缓存机制实例分析

    Android 图片的三级缓存机制实例分析 当我们获取图片的时候,如果不加以协调好图片的缓存,就会造成大流量,费流量应用,用户体验不好,影响后期发展.为此,我特地分享Android图片的三级缓存机制之从网络中获取图片,来优化应用,具体分三步进行: (1)从缓存中获取图片 (2)从本地的缓存目录中获取图片,并且获取到之后,放到缓存中 (3)从网络去下载图片,下载完成之后,保存到本地和放到缓存中 很好的协调这三层图片缓存就可以大幅度提升应用的性能和用户体验. 快速实现三级缓存的工具类ImageCac

  • 深入理解Android组件间通信机制对面向对象特性的影响详解

    组件的特点对于Android的四大组件Activity, Service, ContentProvider和Service,不能有Setter和Getter,也不能给组件添加接口.原因是组件都是给系统框架调用的,开发者只能实现其规定的回调接口,组件的创建与销毁都是由系统框架控制的,开发者不能强行干预,更没有办法获取组件的对象.比如Activity,Service,BroadcastReceiver,你没有办法去创建一个Activity,Service或BroadcastReceiver,然后像使

  • php中socket通信机制实例详解

    本文实例讲述了php中socket通信机制及用法.分享给大家供大家参考.具体分析如下: 一.socket是什么 什么是socket 所谓socket通常也称作"套接字",用于描述ip地址和端口,是一个通信链的句柄.应用程序通常通过"套接字"向网络发出请求或者应答网络请求.说白了就是一种通信机制.它类似于银行,电信啊这些部分的电话客服部门.你打电话的时候,那边会分配置一个人回答你的问题,客服部门就相当于socket的服务器端了,你这边呢就相当于客户端了,在和你通话结束

  • Yii2框架类自动加载机制实例分析

    本文实例讲述了Yii2框架类自动加载机制.分享给大家供大家参考,具体如下: 在yii中,程序中需要使用到的类无需事先加载其类文件,在使用的时候才自动定位类文件位置并加载之,这么高效的运行方式得益于yii的类自动加载机制. Yii的类自动加载实际上使用的是PHP的类自动加载,所以先来看看PHP的类自动加载.在PHP中,当程序中使用的类未加载时,在报错之前会先调用魔术方法__autoload(),所以我们可以重写__autoload()方法,定义当一个类找不到的时候怎么去根据类名称找到对应的文件并加

  • Java中实现线程间通信的实例教程

    Java中实现线程间通信的实例教程

    目录 前言 1. 如何让两个线程依次执行? 2. 如何让两个线程按照指定的方式有序相交? 3. 线程 D 在A.B.C都同步执行完毕后执行 4. 三个运动员分开准备同时开跑 5. 子线程将结果返回给主线程 总结 前言 虽然通常每个子线程只需要完成自己的任务,但是有时我们希望多个线程一起工作来完成一个任务,这就涉及到线程间通信. 关于线程间通信本文涉及到的方法和类包括:thread.join().object.wait().object.notify().CountdownLatch.Cyclic

  • Android编程之消息机制实例分析

    本文实例讲述了Android编程之消息机制.分享给大家供大家参考,具体如下: 一.角色描述 1.Looper: 一个线程可以产生一个Looper对象,由它来管理此线程里的Message Queue(消息队列). 2.Handler: 你可以构造Handler对象来与Looper沟通,以便push新消息到Message Queue里:或者接收Looper(从Message Queue取出)所送来的消息. 3. Message Queue(消息队列):用来存放线程放入的消息. 4．线程:UI thr

  • Android开发之Parcel机制实例分析

    本文实例讲述了Android开发之Parcel机制.分享给大家供大家参考.具体分析如下: 在java中,有序列化机制.但是在安卓设备上,由于内存有限,所以设计了新的序列化机制. Container for a message (data and object references) that can be sent through an IBinder.  A Parcel can contain both flattened data that will be unflattened on t

  • AngularJS中scope的绑定策略实例分析

    本文实例讲述了AngularJS中scope的绑定策略.分享给大家供大家参考,具体如下: 当scope选项写为scope:{ }这种形式的时候,就已经为指令生成了隔离作用域,指令的模板就无法访问外部作用域了: 具有隔离作用域的指令最主要的使用场景是创建可复用的组件,组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域. 现在,我们来看看绑定策略的三种形式: @.= .&. 1. @ 本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定.指令内部作用域可以

  • AngularJS入门教程之MVC架构实例分析

    AngularJS入门教程之MVC架构实例分析

    本文实例讲述了AngularJS的MVC架构.分享给大家供大家参考,具体如下: MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行.MVC的核心思想是將数据的管理(Model).业务逻辑控制(Controller)和数据的展示(View)分离开来,使程序的逻辑性和可维护性更强. 对于AngularJS应用来说,视图(View)是DOM(文档对象模型),你可以理解为就是HTML页面.控制器(Controller)是一个

随机推荐