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 入门基础学习
Mar 10 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
学习Angularjs分页指令
Jul 01 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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
Protoss魔法科技
2020/03/14 星际争霸
用PHP实现图象锐化代码
2007/06/14 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
Python单元测试简单示例
2018/07/03 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
Pycharm修改python路径过程图解
2020/05/22 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python 批量将中文名转换为拼音
2021/02/07 Python
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
销售人员中英文自荐信
2013/09/22 职场文书
九年级化学教学反思
2014/01/28 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
另类冲刺标语
2014/06/24 职场文书
新闻学专业求职信
2014/07/28 职场文书
查摆剖析材料范文
2014/09/30 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
大学生党员个人总结
2015/02/13 职场文书
毕业班工作总结
2015/08/10 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers