angularjs学习笔记三——directive

AngularJS 通过被称为 指令 的新属性来扩展 HTML。

正如你所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。

HTML5 允许扩展的（自制的）属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

以下列举了一些指令，并不一定常用，但是都有用！

有些指令相关的demo，有兴趣的可以下载，github地址：https://github.com/392468072/demo

自带指令

1、ng-app此指令声明angular的边界，也就是应用程序入口（当然没有ng—app指令的时候也不要奇怪，还有其他方法可以做入口，angular.bootstrap（element，[modules]，config））

2、ng-bind 就是绑定模板，其实和{{hash}}的效果是一样的，不过要注意的是{{hash}}在各种原因下可能会被用户看到，带来不好的用户体验

3、ng-model 它链接了页面可交互元素（input，textarea之类的）和位于$scope之上的model，这儿有点乱，自己理清楚即可

4、ng-controller设置子作用域对象$scope（父作用域为$rootScope）的初始状态，给子作用域$scope增加行为，控制业务逻辑

5、ng-init 初始化数组，可以方便测试，现在已经不推荐使用了

6、ng-repeat迭代输出 orderBy：“keyword”可以指定输出顺序

7、ng-click 允许自定义行为某个元素被点击，当然其它事件指令都有类似的作用如：

　　ng-dbclick双击　　ng-mouseDown按下鼠标左键　　ng-mouseUp松开鼠标左键　　ng-mouseOver鼠标移出　　ng-mouseEnter鼠标移入

　　ng-copy 文本被复制　　ng-paste文本被粘贴　　ng-select文本被选择  ng-change ng-blur ng-keydown等等，当然还有很多，就不11列出了

8、ng-submit 这肯定和form表单相关咯，对，就是submit form的意思

9、ng-href/ng-src 链接，这里可能会有人问，为什么不直接用html标签的属性呢？href/src = “{{hash}}”

　　因为官方说：The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}.

　　如果浏览器将{{hash}}里的值,也即src/href属性值替换成文本以后可能就停止干活了.

10、ng-if 接收boolean值，若为false，它控制的DOM节点会被删除，若为true就会创建被插入DOM节点

11、ng-include 可以在模板中嵌入其他模板，实现前端页面的复用 

12、ng-non-bindable指令指该元素的内部{{****}}不被绑定和转义，不受angular的掌控

13、ng-pluralize 应该是使成为复数

14、ng-show/ng-hide 显示、隐藏元素

15、ng-style设置style  接收一个css对象  ng-style={{cssObj}}

16、ng-switch这个指令相当于通过$scope内部变量控制dom的隐藏和显示，其实这个指令非常强大， 相当于是为html代码提供了ifelse的功能 （因为angular的html中不能通过ifelse控制逻辑）

17、ng-transclude自定义标签

自定义指令

最后说明：指令是可以自定义的

具体的有4种表现方式：

  1. E 页面标签，也就是新的html元素<hello-angular></hello-angular>　　
  2. A 元素的属性<input type="text" hello-angular="" />
  3. C css类选择器的值<input type="text"  class="hello-angular"/>
  4. M 注释<!-- director:hello-angular -->

先来创建一个自定义指令（13—23行代码）

 1 <!DOCTYPE html>
 2 <html ng-app="app">
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>自定义指令demo</title>
 6     </head>
 7     <body>
 8         <div ng-controller="testCon">
 9             <hello-angular>beauty</hello-angular>
10         </div>
11         <script type="text/javascript" src="js/angular.js"></script>
12         <script>
13             angular.module('app',[])
14             .directive('helloAngular',function(){
15                 return{
16                     restrict:'AECM',
17                     template:'<p>hello,<b ng-transclude></b></p>',
18                     transclude:true
19                 };
20             })
21             .controller('testCon',function($scope){
22                 
23             });
24         </script>
25     </body>
26 </html>

输出：    hello，beauty        

没错就是上面那个输出，不信可以试试咯！

restrict：　　　翻译为”限制“，也许细心的人会发现这个属性，一一对应指令的四种变现方式，这就对了，这就是被允许的表现方式

templace：　　这其中是标签也可以是字符串，不是标签的话会报错，它的兄弟属性是templateUrl，两者只需其一

templateUrl：  url？是的，必须是url才行咯，想想看，如果没有这个属性，template将会承载所有的标签，如果你要添加很长的一段代码，那么template的属性值会很长很长，

　　　　　　　  肯定会不方便咯

transclude：    前面那个<b>标签的属性ng-transclude肯定和这个有关系对吧，设置为true，一个乾坤大挪移就把<hello-angular>移动到template中的<b>标签里面咯

接着，小小的改下代码，17 18行改成下面这样，看俺replace的作用

1 restrict:'AECM',
2 replace:true,
3 template:'<p>hello</p>'

replace：    从单词的意思就可以看出来，替代，没错，就是用<p>hello</p>替代页面上的<hello-angular><hello-angular>

不要问卤煮为什么，自己敲一敲就ok。

再来一段代码，说明下面scope的用法

 1 <!DOCTYPE html>
 2 <html ng-app="app">
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>自定义指令demo</title>
 6     </head>
 7     <body>
 8         <div ng-controller="testCon">
 9             <hello-angular info="person"></hello-angular>
10         </div>
11         <script type="text/javascript" src="js/angular.js"></script>
12         <script>
13             angular.module('app',[])
14             .directive('helloAngular',function(){
15                 return{
16                     restrict:'AECM',
17                     scope:{
18                         personReference:'=info'
19                     },
20                     template:'He is {{person.name}}'    
21                 };
22             })
23             .controller('testCon',function($scope){
24                 $scope.person = {name:'Tom',age:180};
25             });
26         </script>
27     </body>
28 </html>

scope：自定义作用域，没有这个属性时默认使用父级controller的$scope，有socpe{}时，此scope继承父级controller的$scope

绑定策略的三种形式”=“，“@”，“&”   将本地作用域和DOM中的属性值绑定起来

”=“对一个对象的引用，后面的info是自定义标签中的属性（第9行代码），简而言之，personReference对象是person对象的引用

”@“表示对一个字符串的拷贝<ps:这儿不太确定，不过根据js来看，应该是这样>，这里不再赘述

”&“表示对父级作用域进行绑定，并将其中的属性包装成一个函数

 1 <!DOCTYPE html>
 2 <html ng-app="app">
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>自定义指令demo</title>
 6     </head>
 7     <body>
 8         <div ng-controller="testCon">
 9             <hello-angular get-classes="classes" get-name="name"></hello-angular>
10         </div>
11         <script type="text/javascript" src="js/angular.js"></script>
12         <script>
13             angular.module('app',[])
14             .directive('helloAngular',function(){
15                 return{
16                     restrict:'AECM',
17                     scope:{
18                         getClasses:'&',
19                         getName:'&'
20                     },
21                     template:'there are {{classes}} classes<br /><div ng-repeat="i in name">NO.{{$index+1}} className is {{i}}</div>',
22                     controller:function($scope){
23                         $scope.classes = $scope.getClasses();
24                         $scope.name = $scope.getName();
25                     }
26                 };
27             })
28             .controller('testCon',function($scope){
29                 $scope.classes = 3;
30                 $scope.name = ['A','B','C'];
31             });
32         </script>
33     </body>
34 </html>

输出截图

“=”，“@”，“&”简写方式（代码第18,19行）scope{}中属性值可以简写为“@”，不过也必须遵循和DOM节点的属性一一对应的原则，angular会进行自动匹配

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jianjianwoshi/p/4845615.html