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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 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新手上路(十一)
2006/10/09 PHP
php a simple smtp class
2007/11/26 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
JS的replace方法介绍
2012/10/20 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python网络应用开发知识点浅析
2019/05/28 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
python实现人脸签到系统
2020/04/13 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
python中if及if-else如何使用
2020/06/02 Python
幼儿园教研活动方案
2014/01/19 职场文书
教育科研先进个人材料
2014/01/26 职场文书
《乡愁》教学反思
2014/02/18 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
保密工作整改报告
2014/11/06 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
朋友聚会开场白
2015/06/01 职场文书
SQL中的连接查询详解
2022/06/21 SQL Server