directive和controller如何通信
1.AngularJS是何方神圣
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。这里AngularJS就应运而生，弥补了HTML的天然缺陷，用于构件Web应用等。
2.如何了解AngularJS
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。
AngularJS官网：http://www.angularjs.org（一般来说会被墙掉，所以可以访问下面的网站）
AngularJS中文网站：http://www.ngnice.com
书籍：《AngularJS 权威教程》《用AngularJS开发下一代Web应用》等。个人意见，For your information
备注：视频教程，最近有看过大漠老师的AngularJS教程，觉得还不错，但是感觉没有一点基础还是听不懂的，或者要看好几遍（不是做广告）
3.为什么要了解AngularJS
一项新技术能够面世，为众人所知，从而脱引而出，定然不是空穴来风，肯定有其标新立异的过人之处，主要有以下几点：
（1）MVC的思想（或者是MVVM）
（2）模块化和依赖注入
（3）双向数据绑定
（4）指令
每一个特性都可以大篇幅的展开，显然，目前能力不够，没法展开，有兴趣可以网上搜下，大体了解。
今天主要来说说AngularJS的三个指令“@”，“=”，“&”的用法和区别（这个问题困扰了我大半天，和Frank交流多次，我才明白）
1.指令作用域中的@
作用是把当前属性作为字符串传递。
先上代码，前台界面：
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<drink water="{{pureWater}}"></drink>
</div>
</body>
<script src="../js/angular.js">
<script src="ScopeAt.js"></script>
</html>
JS:
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.pureWater="纯净水";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
water:'@'
},
template:"<div>{{water}}</div>"
}
});
执行的结果平淡无奇，却暗藏玄机：
（1）HTML页面中，声明一个标签<drink></drink>，其中定义一个属性名：water 属性值：pureWater（这里的{{}}是angularjs的一种常见表达式，类似于ng-model，用于值绑定）
（2）JS文件中，首先从模块开始，然后创建一个控制器行2~行4，再定义一个指令，主要实现的是将"<drink></drink>"替换为"<div>{{water}}</div>"标签显示
（3）重点介绍这里的
scope:{
water:'@'
}
具体含义就是在指令的scope上定义一个属性名：water，它的值就是前台界面中water属性的值，也就是"{{pureWater}}";
同时{{pureWater}}的值我们从声明的控制器可以看出：
$scope.pureWater="纯净水";
所以最终页面显示的是“纯净水”，主要的流程就是：
a.在指令中，通过@实现指令与HTML页面元素关联;
b.在控制器中又实现了与页面的联系;
c.从而借助HTML页面建立起控制器与指令的联系，也是一种通讯方式。
具体见下图：
2.指令作用域中的=
作用是与父scope中的属性进行双向绑定。
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
Ctrl:
<br>
<input type="text" ng-model="pureWater">
<br>
Directive:
<br>
<drink water="pureWater"></drink>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="ScopeEqual.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.pureWater="纯净水";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
water:'='
},
template:'<input type="text" ng-model="water"/>'
}
});
这里=的手段类似，通过页面设置两个输入框，分别代表指令和控制器的作用域，在JS代码实现了双向绑定，做到了控制器与指令在各自作用域内能够影响对方，也就是双向通信，具体思路与@类似，不赘述，上图：
3.指令作用域中的&
主要作用是传递一个来自父scope的函数，稍后调用。
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="ScopeAnd.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});
从页面可以看出，这里定义了一个标签<greeting></greeting>，并在其中定义了属性名greet，与上面的@以及=不同的是，属性名后面是一个方法，所以，这里的&主要用于在Controller和directive之间传递函数，实现两者之间的函数通信，在JS中，将前台的greeting标签替换为template中的内容，一个输入框加上一个按钮，按钮上绑定了greet函数，与前台页面的greet相呼应，而前台的greet函数在控制器中有定义，所以指令中也是调用的控制器中的greet函数。执行结果如下：
（1）初始界面
（2）在第一个文本框填值
（2）在第二个文本框填值
（3）在第三个文本框填值
原文出处：http://www.cnblogs.com/bigdataZJ/p/AngularJS1.html?utm_source=tuicool
directive和controller如何通信的更多相关文章
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- angularJS项目-ajax事件的按钮loading和页面loading状态 & Controller之间通信-待续
1).按钮loading --TODO 2). page loading状态 1.在module中注入指令 // Route State Load Spinner(used on page or co ...
- Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- 【转】Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- 我也谈 AngularJS 怎么使用Directive, Service, Controller
原文地址:http://sunqianxiang.github.io/angularjs-zen-yao-shi-yong-directiveservicecontroller.html 其转自大漠穷 ...
- AngularJS：何时应该使用Directive、Controller、Service？
AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...
- AngularJS自定义Directive与controller的交互
有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controlle ...
- 何时应该使用Directive、Controller、Service？
AngularJS:何时应该使用Directive.Controller.Service? 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可 ...
随机推荐
- 写一个Windows上的守护进程（6）Windows服务
写一个Windows上的守护进程(6)Windows服务 守护进程因为要开机启动,还要高权限,所以我就把它做成Windows服务了. 关于Windows服务的官方文档,大家可以看https://msd ...
- 有向强连通分支Tarjan算法
本文转载自:http://blog.csdn.net/xinghongduo/article/details/6195337 说到以Tarjan命名的算法,我们经常提到的有3个,其中就包括本文所介绍的 ...
- JQuery阻止表单提交的方法总结 - 使用onsubmit()验证表单并阻止非法提交
方法1:<form onsubmit="javascript:confirm()"> 方法内返回false阻止表单提交 示例:代码检测textarea内填写的长度,未填 ...
- PHP设置http头信息
<?PHP function https($num) { $http = array ( 100 => "HTTP/1.1 100 Continue", 101 =&g ...
- sqlserver 2000新建sysadmin角色
新建登录:sp_addlogin 'netcafe','pubwin' netcafe是用户名,pubwin是密码,下面是msdn官方格式: sp_addlogin [ @loginame = ] ...
- static的用法解析
PHP中static变量的使用范围要更广一些,我们不仅可以在类,方法或变量前面添加static修饰符,我们甚至还能给函数内部变量添加static关键字.添加了static修饰符的变量即使在该函数执行完 ...
- c++基础五个题（一）
一.深拷贝和浅拷贝? 浅拷贝是指源对象与拷贝对象共用一份实体,仅仅是引用的变量不同(仅仅是名称不同),对其中任何一个对象的改动都会影响另外一个对象,例如:一个人叫小王,后来改名小李,结果不管是小王死了 ...
- C语言基础10
栈区间:在函数内部声明的变量都存放在栈区间,比如int char 数组 结构体 指针,只管申请,系统会自动帮我们回收,收回的时间是作用域结束之后,遵循的原则是"先进后出". int ...
- ExtJs Model之convert的使用
convert: function(value,record){} value:为当前属性的值,record.get('属性')用来获取其他属性的值. 以下案例是:将年龄减去2. Ext.define ...
- SQL学习笔记——SQL初入门，Ubuntu下MySQL的安装
刚开始接触sql,于是准备在Ubuntu下学习sql,就跟着itercast的sql教程开始入门了. 下面只是我个人的记录,高手请绕道: 一. 在安装之前,我们可以用下面这个命令通过开放端 ...