AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍《JavaScript DOM编程艺术》，就以为可以接过AngularJS的一招半式，一个星期过去了，我发现自己还是Too Young，Too Simple！（刚打照面的时候，我就被乱棍砸晕了-_-!）
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:'@'
}
该表达式等价于：
link:function(scope,element,attrs){
scope.water=attrs.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）在第三个文本框填值
补充：关于directive的scope有三种类型，本文没有给出，具体细节参见8楼@左洸
本文链接：《AngularJS入门心得1——directive和controller如何通信》
如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！如果您想持续关注我的文章，请扫描二维码，关注JackieZheng的微信公众号，我会将我的文章推送给您，并和您一起分享我日常阅读过的优质文章。
AngularJS入门心得1——directive和controller如何通信的更多相关文章
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- AngularJS入门心得3——HTML的左右手指令
在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
- [AngularJS + Unit Testing] Testing Directive's controller with bindToController, controllerAs and isolate scope
<div> <h2>{{vm.userInfo.number}} - {{vm.userInfo.name}}</h2> </div> 'use str ...
- directive和controller如何通信
1.AngularJS是何方神圣 Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工 ...
- 我也谈 AngularJS 怎么使用Directive, Service, Controller
原文地址:http://sunqianxiang.github.io/angularjs-zen-yao-shi-yong-directiveservicecontroller.html 其转自大漠穷 ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJS：何时应该使用Directive、Controller、Service？
AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...
- AngularJS自定义Directive与controller的交互
有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controlle ...
随机推荐
- Word文字处理器发展演变
随着信息技术的不断发展,以前书面化的信笺,笔记,书籍以及作业演变成现在不断更新的电子化Word文档. Word是目前世界上最流行.最常用的文字编辑,排版软件,使用它不仅可以提高文档的编辑效率,在修改时 ...
- JavaScript调试工具
最常用的最有效的有三个: 1. FireFox浏览器的Firebug,我用得不多 2. IE 8浏览器的Microsoft Script Editor.当运行网页的脚本出错时,会报错,如下所示: 单击 ...
- PHPBB公布新的维护版本
9月28日,PHPBB官方网站公布了新PHPBB的最新消息.这个版本命名为:"Richard 'D¡cky' Foote",版本号为3.0.12.据官方的说明,“这个版本是一个维护 ...
- SQL入门经典(八) 之存储过程
存储过程(stored procedure)有时候称为sproc,它是真正的脚本-或者更准确的说,他是批处理(batch)-它存储于数据库中,而不是淡出的文件中.无论如何,这个比较并不是很确定.存储过 ...
- ASP.Net MVC的ViewBag一个坑，不要跳进去
如鹏的学习管理系统是使用ASP.net MVC 5开发的,今天一个新版本发布后网站出现一个Bug,学生在下拉列表中选中的项再加载显示的时候发现仍然没被选中.详细一点说吧:假如有这样一个Action: ...
- [教程]怎么用百度云观看和下载"磁力链接"无需下载直接观看.
1, 打开网址 http://okbt.net/ 输入你想要看的电影名字, 点搜索,鼠标右键点击拷贝磁力链接.或者 电脑装了迅雷的话.可以直接点击.用迅雷下载. 磁力链接都是这种格式的.例: mag ...
- clang 简单的str_replace实现
自己写的一段: //gool char* str_replace(char* source, const char* find, const char* replace){ if (source == ...
- 开始VS 2012中LightSwitch系列的第5部分：我可以使用用户权限来控制访问权吗？
[原文发表地址] Beginning LightSwitch in VS 2012 Part 5: May I? Controlling Access with User Permissions [ ...
- 微软颜龄Windows Phone版开发小记
随着微软颜龄中文网cn.how-old.net的上线,她也顺势来到了3大移动平台. 用户在微软颜龄这一应用中选择一张包含若干人脸的照片,就可以通过云计算得到他们的性别和年龄. 今天我们就和大家分享一下 ...
- 自定义项目脚手架- Maven Archetypes
在上篇Intellij修改archetype Plugin配置 中我们已经简单介绍了关于archetype的作用. 简单来说maven archetype插件就是创建项目的脚手架,你可以通过命令行或者 ...