angularjs学习笔记三——directive

时间 2019-11-19

标签 angularjs 学习笔记 directive 栏目 AngularJS 繁體版

原文原文链接

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

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

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

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

如下列举了一些指令，并不必定经常使用，可是都有用！java

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

自带指令

一、ng-app此指令声明angular的边界，也就是应用程序入口（固然没有ng—app指令的时候也不要奇怪，还有其余方法能够作入口，angular.bootstrap（element，[modules]，config））github

二、ng-bind 就是绑定模板，其实和{{hash}}的效果是同样的，不过要注意的是{{hash}}在各类缘由下可能会被用户看到，带来很差的用户体验express

三、ng-model 它连接了页面可交互元素（input，textarea之类的）和位于$scope之上的model，这儿有点乱，本身理清楚便可bootstrap

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

五、ng-init 初始化数组，能够方便测试，如今已经不推荐使用了

六、ng-repeat迭代输出 orderBy：“keyword”能够指定输出顺序

七、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列出了

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

九、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属性值替换成文本之后可能就中止干活了.

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

十一、ng-include 能够在模板中嵌入其余模板，实现前端页面的复用

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

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

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

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

1六、ng-switch这个指令至关于经过$scope内部变量控制dom的隐藏和显示，其实这个指令很是强大， 至关因而为html代码提供了ifelse的功能 （由于angular的html中不能经过ifelse控制逻辑）

1七、ng-transclude自定义标签

自定义指令

最后说明：指令是能够自定义的

具体的有4种表现方式：

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

先来建立一个自定义指令（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会进行自动匹配