AngularJS入门心得之directive和controller通信过程


Posted in Javascript onJanuary 25, 2016

AngularJS 通过新的属性和表达式扩展了 HTML。Angularjs学习起来也非常的简单。

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-">
<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>"
}
});

执行的结果平淡无奇,却暗藏玄机: 

AngularJS入门心得之directive和controller通信过程

(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页面建立起控制器与指令的联系,也是一种通讯方式。

具体见下图:

AngularJS入门心得之directive和controller通信过程 

2.指令作用域中的=

作用是与父scope中的属性进行双向绑定。

<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<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代码实现了双向绑定,做到了控制器与指令在各自作用域内能够影响对方,也就是双向通信,具体思路与@类似,不赘述,上图:

AngularJS入门心得之directive和controller通信过程

3.指令作用域中的&

主要作用是传递一个来自父scope的函数,稍后调用。

<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<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)初始界面

AngularJS入门心得之directive和controller通信过程 

(2)在第一个文本框填值

AngularJS入门心得之directive和controller通信过程 

(2)在第二个文本框填值

AngularJS入门心得之directive和controller通信过程 

(3)在第三个文本框填值

AngularJS入门心得之directive和controller通信过程 

Javascript 相关文章推荐
JavaScript 学习笔记(十一)
Jan 19 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
Javascript使用integrity属性进行安全验证
Nov 07 Javascript
详解jquery事件delegate()的使用方法
Jan 25 #Javascript
AngularJS中的Directive实现延迟加载
Jan 25 #Javascript
AngularJS中的Directive自定义一个表格
Jan 25 #Javascript
理解JavaScript事件对象
Jan 25 #Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 #Javascript
学习JavaScript事件流和事件处理程序
Jan 25 #Javascript
javascript产生随机数方法汇总
Jan 25 #Javascript
You might like
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
PHP实现计算器小功能
2020/08/28 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python绘制双柱形图代码实例
2017/12/14 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
校园达人秀策划书
2014/01/12 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
安全目标管理责任书
2014/07/25 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
加入学生会自荐书
2015/03/05 职场文书
公司年会开场白
2015/06/01 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
生日祝酒词大全
2015/08/10 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python