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 表单规则集合对象
Jul 21 Javascript
js 编写规范
Mar 03 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
浅谈微信小程序flex布局基础
Sep 10 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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函数
2010/02/16 PHP
PHP PDO函数库详解
2010/04/27 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
对python模块中多个类的用法详解
2019/01/10 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
wxPython实现整点报时
2019/11/18 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
python自定义函数def的应用详解
2020/06/03 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
户外亲子活动策划方案
2014/02/07 职场文书
一般纳税人申请报告
2015/05/18 职场文书