AngularJS入门中指令和控制器之间的通信过程

AngularJS用新的属性和表达式扩展了HTML。Angularjs学习起来也很简单。

1.谁是1。AngularJS神圣？

角度JS(角度。JS)是一组用于开发网页的框架、模板、数据绑定和丰富的UI组件。它支持整个开发过程，提供web应用的框架，不需要手工DOM操作。

AngularJS旨在克服HTML在构建应用程序时的缺点。HTML是一种很好的用于静态文本表示的声明性语言，但是它在构建WEB应用程序时很弱。在这里，AngularJS应运而生，弥补了HTML的天然缺陷，被用来构建Web应用。

2.如何理解AngularJS？

AngularJS诞生于2009年，由Misko Hevery等人创立，后来被谷歌收购。

AngularJS官网：http://www.angularjs.org(一般会被屏蔽，所以可以访问以下网站)。

中文网站：http://www.ngnice.com。

书籍：《AngularJS 权威教程》 《用AngularJS开发下一代Web应用》等。个人观点，仅供参考。

备注：视频教程，最近看了沙漠老师的AngularJS教程，觉得还不错，但是没有任何基础还是看不懂，还是要看好几遍(不是广告)。

3.你为什么想知道AngularJS？

一项新技术能够问世并为大家所知，所以肯定不是空穴来风，但一定要有自己的新鲜感，主要包括以下几点：

(1)MVC理念(或MVVM)。

(2)模块化和依赖注入。

(3)双向数据绑定。

(4)说明。

每个功能都可以在很大的空间内开发。显然，目前还没有足够的能力去开发它。如果你感兴趣，可以上网搜索一下，大致了解一下。

今天我主要讲讲AngularJS的三个指令“@”、“=”和“”的用法和区别(这个问题困扰了我大半天，和Frank沟通了很多次才明白)。

1.@在指令范围内。

该函数将当前属性作为字符串传递。

代码优先，前台界面：

！doctype html html ng-app=' MyModule ' hearteta charset=' utf-' link rel='样式表' href='./CSS/bootstrap . CSS '/Heydiv ng-controller=' my ctrl '饮用水=' { { pure water } } '/饮料/div/body script src=' http:/js/angular . js ' script src=' http 3360 scope at . js '/script/html js代码：

var myModule=angular . module(' myModule '，[])；Mymodule.controller ('myctrl '，['$ scope '，function($ scope){ $ scope . pure water='纯净水'；}])myModule.directive('饮品'，function(){ return { restrict : ' AE '，scope:{water:'@'}，template : ' div { { water } }/div ' })；执行的结果平淡无奇，但却暗藏玄机：

(1)在html页面中，声明一个tag饮品/饮料，其中定义了一个属性名：water属性值：pureWater(这里{{}}是angularjs的常用表达式，类似于ng-model，用于值绑定)。

(2)在JS文件中，先从模块开始，然后创建一个控制器第2行~第4行，然后定义一个指令，主要是通过将‘饮料/饮料’替换为‘div { { water } }/div’来实现。

(3)关注这里。

Scope:{water:'@'}此表达式相当于：

link:function(scope，element，attrs){ scope . water=attrs . water；}具体含义是在指令的作用域上定义一个属性名：water，其值为前台界面中water属性的值，即' { { pure water } } '；

同时，我们可以从声明的控制器中看到{{pureWater}}的值：

$scope.pureWater='纯净水'；

所以最后一页显示的是“纯水”，主要过程是：

A.在指令中，通过@，实现指令与HTML页面元素的关联；

b .在控制器中实现与页面的连接；

C.因此，控制器和指令之间的连接是通过HTML页面建立的，这也是一种通信方式。

详见下图：

2.=在指令范围内。

用于与父范围中的属性进行双向绑定。

！doctype html html ng-app=' my module ' hearta charset=' utf-' link rel='样式表href='./CSS/bootstrap。CSS '/headdydiv ng-controller=' MyCtrl ' ctrl : br input type=' text ' ng-model='纯水' brdirective : br饮用水='纯水'/饮料/div/bodyscript src='http:/js/angular。js '/script script src=' http :s cope equal。js '/script/html var myModule=angular。module(' myModule '，[])；myModule.controller('MyCtrl '，['$scope '，function($ scope){ $ scope。纯净水='纯净水；}])myModule.directive('饮品，function(){ return { restrict : ' AE '，scope:{water:'='}，template: '输入类型=' text ' ng-model=' water '/' })；这里=的手段类似，通过页面设置两个输入框，分别代表指令和控制器的作用域，在射流研究…代码实现了双向绑定，做到了控制器与指令在各自作用域内能够影响对方，也就是双向通信，具体思路与@类似，不赘述，上图：

3.指令作用域中的

主要作用是传递一个来自父范围的函数，稍后调用。

！doctype html html ng-app=' my module ' hearta charset=' utf-' link rel='样式表href='./CSS/bootstrap。CSS '/header dydiv ng-controller=' MyCtrl ' hello问候语='说你好(名字)'/哭泣问候语='说你好(名字)'/哭泣问候语=' sayHello(姓名)'/问候语/div/bodyscript src='http:/js/angular。js '/script script src=' http :作用域。js '/script/html var myModule=angular。module(' myModule '，[])；myModule.controller('MyCtrl '，['$scope '，function($ scope){ $ scope。sayhello=函数(名称){ alert(' Hello '名称)；} }])mymodule。指令(' helling '，函数(){ return { restrict : ' AE '，scope:{greet:''}，template: '输入类型=' text ' ng-model=' userName '/br/' button class=' BTN BTN-default ' ng-click=' greet({ name : userName })' helling/button br/' })；从页面可以看出，这里定义了一个标签问候/问候，并在其中定义了属性名问候，与上面的@以及=不同的是，属性名后面是一个方法，所以，这里的主要用于在控制器和管理的之间传递函数，实现两者之间的函数通信，在射流研究…中，将前台的问候标签替换为模板中的内容，一个输入框加上一个按钮，按钮上绑定了迎接函数，与前台页面的迎接相呼应，而前台的迎接函数在控制器中有定义，所以指令中也是调用的控制器中的迎接函数。执行结果如下：

(1)初始界面

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

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

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