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:'@'
}

具体含义就是在指令的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)在第三个文本框填值

原文出处:http://www.cnblogs.com/bigdataZJ/p/AngularJS1.html?utm_source=tuicool

directive和controller如何通信的更多相关文章

  1. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  2. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  3. angularJS项目-ajax事件的按钮loading和页面loading状态 & Controller之间通信-待续

    1).按钮loading --TODO 2). page loading状态 1.在module中注入指令 // Route State Load Spinner(used on page or co ...

  4. Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  5. 【转】Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  6. 我也谈 AngularJS 怎么使用Directive, Service, Controller

    原文地址:http://sunqianxiang.github.io/angularjs-zen-yao-shi-yong-directiveservicecontroller.html 其转自大漠穷 ...

  7. AngularJS:何时应该使用Directive、Controller、Service?

    AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...

  8. AngularJS自定义Directive与controller的交互

    有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controlle ...

  9. 何时应该使用Directive、Controller、Service?

    AngularJS:何时应该使用Directive.Controller.Service? 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可 ...

随机推荐

  1. 写一个Windows上的守护进程(4)日志其余

    写一个Windows上的守护进程(4)日志其余 这次把和日志相关的其他东西一并说了. 一.vaformat C++日志接口通常有两种形式:流输入形式,printf形式. 我采用printf形式,因为流 ...

  2. latex 模版

    texlive2012 通过 \documentclass[a4paper]{article} %\documentclass[twocolumn]{article}   %\usepackage{g ...

  3. [hdu5136]Yue Fei's Battle 2014 亚洲区域赛广州赛区J题(dp)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud 现场赛的时候由于有个地方有点小问题,没有成功AC,导致与金牌失之交臂. 由于今天下 ...

  4. Oracle中MERGE语句的使用

    Oracle在9i引入了merge命令, 通过这个merge你能够在一个SQL语句中对一个表同时执行inserts和updates操作. 当然是update还是insert是依据于你的指定的条件判断的 ...

  5. javascript统计输入文本的简易方法

    计算文本框的输入字符数的简易方法: ]; var tValue = text.value; num = Math.ceil(getLength(tValue)/); //正则:用于区分中文为两个字节 ...

  6. Bootstrap的响应式,当文字超过div长度,换行问题的处理!

    (1)overflow: hiddenoverflow 属性规定当内容溢出元素框时发生的事情.这个属性定义溢出元素内容区的内容会如何处理.hidden 表示内容会被修剪,并且剪掉的内容是不可见的. ( ...

  7. logstash 处理nginx 错误日志

    2016/08/30 14:52:02 [error] 11325#0: *346 open() "/var/www/zjzc-web-frontEnd/%27%22%2f%3E%3C%2f ...

  8. perl 创建文本框

    my $mw = MainWindow->new(-title => "Mem monitor"); $frm_name1 = $mw -> Frame()-&g ...

  9. sendto() 向广播地址发包返回errno 13, Permission denied错误

    http://blog.csdn.net/guanghua2_0beta/article/details/52483916 sendto() 向广播地址发包返回errno 13, Permission ...

  10. ALSA音频工具amixer,aplay,arecord

    ALSA音频工具编译安装 ========================================================================1.官网http://www. ...