angular控制器常用的4种通信方式

时间:2023-02-01 00:02:55

首先概括一下angular控制器通信的4种方式:

  1. 作用域继承。
  2. 通过$scope广播事件。
  3. 事件发射器模块。
  4. 服务。
1、作用域的继承
子作用域可以访问声明在它们的祖先作用域中的变量和函数。
<div ng-controller="Controller1">
<div ng-controller="Controller2">
this prints '42':{{answer}}
</div>
</div>
m.controller('Controller1', function ($scope) {
$scope.answer = 42;
});
m.controller('Controller2', function ($scope) {
console.log($scope.answer);
});

2、通过$scope广播事件

$emit调用可以向作用域上方冒泡,$broadcast将向子孙作用域传播,$on可以注册监听器。
<div ng-controller="Controller1">
<div ng-controller="Controller2"> </div>
</div>
m.controller('Controller1', function ($scope) {
$scope.$on('ping', function (){
console.log('pong');
});
$scope.$broadcast('broadcast');
});
m.controller('Controller2', function ($scope) {
$scope.$emit('ping');
$scope.$on('broadcast', function (){
console.log('broadcast');
});
});

3、事件发射器模块event-emitter

event-emitter模块工作方式类似于作用域发射器,它们有3个关键的区别:
  1. event-emitter是独立于作用域的,所以在无法访问作用域的服务中使用它是非常理想的。
  2. 将使用的函数被命名为.on(),.emit()。
  3. 没有对应的$broadcast()函数。
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="event-emitter.js"></script>
<script type="text/javascript">
var app = angular.module('app', []); app.factory('userService', function ($timeout, $window) {
var emitter = $window.emitter();
var user = {}; //模拟http错误
$timeout(function () {
user.emit('error', 'Could not connect to server');
}, 1000); return user;
}); app.factory('profileService', function (userService) {
var ret = {
user: userService,
}; userService.on('error', function () {
console.log('get error');
}); return ret;
});
</script>

4、最常用的通信是服务

因为服务是单例,所以在任何组件内改变服务的值都将影响其他组件,用法很简单,只要把服务列为依赖就可以了,如以上代码所示。

注:参考自《AngularJS高级编程》,仅当备忘录。




angular控制器常用的4种通信方式的更多相关文章

  1. iOS App之间常用的五种通信方式及适用场景总结

    iOS系统是相对封闭的系统,App各自在各自的沙盒(sandbox)中运行,每个App都只能读取iPhone上iOS系统为该应用程序程序创建的文件夹AppData下的内容,不能随意跨越自己的沙盒去访问 ...

  2. iOS日常学习 - App之间常用的五种通信方式及适用场景总结

    本文为转载学习,原文地址 iOS系统是相对封闭的系统,App各自在各自的沙盒(sandbox)中运行,每个App都只能读取iPhone上iOS系统为该应用程序程序创建的文件夹AppData下的内容,不 ...

  3. angular 控制器的使用两种模式

    angular.module("myApp",[]) .controller("firstCtrl",["$scope",function( ...

  4. App间常用的五种通信方式

    1.URL Scheme 2.Keychain 3.UIPasteboard剪切板 4.UIDocumentInteractionController 5.local socket 详见: 转自:ht ...

  5. 【原】实时渲染中常用的几种Rendering Path

    [原]实时渲染中常用的几种Rendering Path 本文转载请注明出处 —— polobymulberry-博客园 本文为我的图形学大作业的论文部分,介绍了一些Rendering Path,比较简 ...

  6. iOS导航控制器常用函数与navigationBar常用属性

    导航控制器常用函数触发时机 当视图控制器的View将要出现时触发 - (void)viewWillAppear:(BOOL)animated 当视图控制器的View已经出现时触发 - (void)vi ...

  7. C&num;中常用的几种读取XML文件的方法

    1.C#中常用的几种读取XML文件的方法:http://blog.csdn.net/tiemufeng1122/article/details/6723764/

  8. 国内常用的三种框架:ionic&sol;mui&sol;framework7对比

    国内常用的三种框架:ionic/mui/framework7对比 原文连接:http://zhihu.com/question/19558750/answer/91179040

  9. &period;NET中常用的几种解析JSON方法

    一.基本概念 json是什么? JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是一种轻量级的数据交换格式,是存储和交换文本信息的语法. ...

随机推荐

  1. OpenCV从入门到放弃系列之——core模块&period;核心功能(一)

    Mat - 基本图像容器 世间的图像是各种各样的,但是到了计算机的世界里所有的图像都简化为了数值矩以及矩阵信息.作为一个计算视觉库,OpenCV的主要目的就是处理和操作这些信息,来获取更高级的信息,也 ...

  2. js在前端获取在本地上传图片的尺寸

    var MyTest = document.getElementById("upload_img").files[0];var reader = new FileReader(); ...

  3. 【C&sol;C&plus;&plus;】Linux下使用system&lpar;&rpar;函数一定要谨慎

    [C/C++]Linux下使用system()函数一定要谨慎 http://my.oschina.net/renhc/blog/53580 曾经的曾经,被system()函数折磨过,之所以这样,是因为 ...

  4. Hibernate get 和load的区别

    1 load是要用的时候才从数据库去查询,get 是马上查询. 2 对于不存在的记录,get会报空指针异常,load会报 org.hibernate.ObjectNotFoundException:  ...

  5. MYSQL 命令行导入导出数据库文件

    MYSQL命令行导入数据库 1.首先通过命令行进入到mysql安装目录的bin目录下,比如我输入的命令为: cd E:\MySQL\MySQL Server 5.5\bin,输入如下命令: mysql ...

  6. Codeforces 446A&period; DZY Loves Sequences &lpar;线性DP&rpar;

    <题目链接> 题目大意: 给定一个长度为$n$的序列,现在最多能够改变其中的一个数字,使其变成任意值.问你这个序列的最长严格上升子段的长度是多少. #include <bits/st ...

  7. iterm2 快捷键(转载)

    Mac 下 iterm2 的快捷键,转自:https://github.com/sumiaowen/iterm2-shortcuts iterm2-shortcuts(iterm 2 快捷键) 标签 ...

  8. SpringBoot 配置静态资源映射

    SpringBoot 配置静态资源映射 (嵌入式servlet容器)先决知识 request.getSession().getServletContext().getRealPath("/& ...

  9. cve-2017-11882 poc分析

    目录 CVE-2017-11882 poc分析 0x00 工具&实验环境 0x01 分析行为 第一步:观察poc行为 第二步:找出计算器被弹出的地方 0x02 调试定位漏洞触发点 0x03 分 ...

  10. 用Android程序打开和关闭输入法

    一.打开输入法窗体: InputMethodManager inputMethodManager = (InputMethodManager)getSystemService(Context.INPU ...