controller 和 指令 通讯方法
在 angular 中我们经常会使用多个 controller 和 指令
他们拥有各自的 $scope , 这就产生了跨$scope调用的问题。
有几种常见的方法来可以使用.
方法一 : 指令 require
<div directive1="xx">
<div directive2></div>
</div> directive("directive1", [function () {
return {
restrict: "A",
link: function () { },
scope: true,
controller: ["$scope", function ($scope) {
this.alert = function () {
$scope.name = "100"
}
}],
name: "directive1Controller"
}
}]).
directive("directive2", [function () {
return {
restrict: "E",
require: "^directive1Controller", //调用父级指令的controller
link: function (scope, elem, attrs, directive1Controller) {
directive1Controller.alert(); //使用方法
}
}
}]).
指令通过require,调用其它指令controller方法, 达到通讯
方法二 : service
service("sharing", [function () {
this.data = "";
}]).
controller("ctrl", ["$scope", "sharing", function ($scope, sharing) {
$scope.updateData = function () {
sharing.data = "new value";
}
}]).
directive("directive1", ["sharing", function (sharing) {
return {
restrict: "A",
link: function (scope) {
scope.$watch(function () {
return sharing.data;
}, function () {
scope.name = sharing.data;
});
}
}
}]).
模块间如果要通讯最好使用 service 来提供接口 , 那service 和 controller 间可以通过 $watch 来更新$scope.
$watch 有些缺点,内存消耗多
方法3 :事件
controller("ctrl", ["$scope", "sharing", "$rootScope", function ($scope, sharing, $rootScope) {
$scope.updateData = function () {
$rootScope.$broadcast("sharingChange", "new value");
//$emit 是向上冒泡广播
//$broadcast 是向下广播
}
}]).
directive("directive1", ["sharing", function (sharing) {
return {
restrict: "A",
link: function (scope) {
scope.$on("sharingChange", function (e, newValue) {
scope.name = newValue;
});
}
}
}]).
这是比较官方的做法。
总结 :
子层和父层通讯,多使用继承的$scope, 指令的 require ,事件广播
模块间的通讯使用service提供接口会比较容易看的明白, service 和 controller 指令间的通讯,可以用watch,$on或者全局变量(模块内的全局,别用太多既可)
service 接口虽然好, 不过由于指令复用性很高,如果每个操作都开接口的话,很快接口就会很多,所以要确保接口是复用性高的,如果只是为了某次开发为配合某模块而开就不值得了。
$rootScope.$broadcast("Main.myParent.alert", function ($scope) { //某个模块, (通过传入操作方法,这里直接写操作$scope)
$scope.name = "keatkeat"
}); $scope.$on("Main.myParent.alert", function (e, fn) { //常用指令
fn($scope); //调用操作方法并把$scope传入,让外部的逻辑实现操作$scope
});
我们可以把复用性不高的操作,写在外面,这样就可以不用写太多的接口了。
controller 和 指令 通讯方法的更多相关文章
- SpringMVC实现一个controller写多个方法
MultiActionController与ParameterMethodNameResolver在一个Controller类中定义多个方法,并根据使用者的请求来执行当中的某个方法,相当于Struts ...
- MVC路由规则以及前后台获取Action、Controller、ID名方法
1.前后台获取Action.Controller.ID名方法 前台页面:ViewContext.RouteData.Values["Action"].ToString(); Vie ...
- Xshell同时向多个会话发送指令的方法
我们平时使用XSHELL.SecureCRT.putty等ssh连接工具连接到远程主机,每次输入指令都是在单一会话窗口,如果有很多台会话,需要同时输入同样的指令,我们就不用一一输入,浪费时间和精力.可 ...
- 控制器controller与指令中的link、controller中变量作用域的关系
angjualrjs中的作用域与原生js中的函数嵌套原理一致,都是存在作用域的继承.若在子控制器(同样包括在指令中的link或是controllerding中定义变量,此时指令中必须未使用scope独 ...
- MVC前后台获取Action、Controller、ID名方法 以及 路由规则
前后台获取Action.Controller.ID名方法 前台页面:ViewContext.RouteData.Values["Action"].ToString();//获取Ac ...
- jfinal的controller默认访问的方法是什么
index()方法: 如: @Controller("/test/exam")public class TestController 如下请求请求:http://localhost ...
- SDI011 读卡器自动发送00A4选择指令 解决方法
如标题,SDI读卡器会自动发送 004A的应用选择指令 解决方法: 是Certificate Propagation 服务 弄的, 关闭就好了
- Java线程通讯方法之wait()、nofity() 详解
Java线程通讯方法之wait().nofity() 详解 本文将探讨以下问题: synchronized 代码块使用 notify()与notifyAll()的区别 Java wait(),noti ...
- Android USB Host 与 HID 之通讯方法
Android USB Host与HID通讯,就目前Google Developer提供的方法有bulkTransfer()与controlTransfer(),看是简简单单的两个方法,要实现真正的通 ...
随机推荐
- 使用activeMQ实现jms
一:jms介绍 jms说白了就是java message service,是J2EE规范的一部分,跟jdbc差不多,sun只提供了接口,由各个厂商(provider)来进行具体的实现, ...
- 安卓u8800刷机
一篇非常好的帖子:http://bbs.anzhi.com/thread-5113728-1-1.html 虽然不是什么大神,不过在两个QQ群里和这里解答过N多刷机和ROOT中遇到的问题了...而且伸 ...
- COJ 0995 WZJ的数据结构(负五)区间操作
WZJ的数据结构(负五) 难度级别:C: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 请你设计一个数据结构,完成以下功能: 给定一个大小为 ...
- HDU_2016——数据的交换输出
Problem Description 输入n(n<100)个数,找出其中最小的数,将它与最前面的数交换后输出这些数. Input 输入数据有多组,每组占一行,每行的开始是一个整数n,表示这 ...
- C++与lua交互
项目开发的脚本层用的是Lua,引擎用的是C++.但是经理不给开放引擎层的代码.刚好最近项目空闲,安排了学习C++跟Lua的通信. 一.C++与Lua数据交互 数据交互主要是通过C API来实现 首先, ...
- spark1.1.0部署standalone分布式集群
配置三个节点的spark集群,集群模式为standalone模式,其中sp1节点作为主节点,sp2节点和sp3节点为从节点.***注意所有操作均为root用户. 创建3个CentOS虚拟机,如下: s ...
- Beanstalkd介绍
特征 优先级:任务 (job) 可以有 0~2^32 个优先级, 0 代表最高优先级,beanstalkd 采用最大最小堆 (Min-max heap) 处理任务优先级排序, 任何时刻调用 reser ...
- ORACLE STUDY NOTES 01
[JSU]LJDragon's Oracle course notes In the first semester, junior year DML数据操纵语言 DML指:update,delete, ...
- linux下解压压缩rar文件
http://download.csdn.net/detail/hnust_xiehonghao/6679893 下载地址 1. 下载软件 以rarlinux-3.8.0 for linux为例, ...
- HTML5 API's (Application Programming Interfaces)
New HTML5 API's (Application Programming Interfaces) The most interesting new API's are: HTML Geoloc ...