第215天：Angular---指令-阿里云开发者社区

指令（Directive）

AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集

在 DOM 编译期间，和 HTML 关联着的指令会被检测到，并且被执行

在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等

简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作

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

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

二者效果相同。

1、ng-app 指令

ng-app指令用来标明一个AngularJS应用程序

标记在一个AngularJS的作用范围的根对象上

系统执行时会自动的执行根对象范围内的其他指令

可以在同一个页面创建多个ng-app节点

但是angular找到第一个ng-app过后就不会再找

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <title>ng-app 指令</title>
 7 </head>
 8 
 9 <body ng-app="myApp">
10   <!-- angular找到第一个ng-app过后就不会再找 -->
11   <div ng-controller="App1Controller">
12     <input type="button" value="按钮1" ng-click="do1()">
13   </div>
14   <div ng-controller="App2Controller">
15     <input type="button" value="按钮2" ng-click="do2()">
16   </div>
17   <script src="bower_components/angular/angular.js"></script>
18   <script>
19     // 零件1
20     var myApp1 = angular.module('myApp1', []);
21     myApp1.controller('App1Controller', ['$scope', function($scope) {
22       $scope.do1 = function() {
23         console.log(11111);
24       };
25     }]);
26     // 零件2
27     var myApp2 = angular.module('myApp2', []);
28     myApp2.controller('App2Controller', ['$scope', function($scope) {
29       $scope.do2 = function() {
30         console.log(22222);
31       };
32     }]);
33 
34     angular.module('myApp', ['myApp1', 'myApp2']);
35   </script>
36 </body>
37 
38 </html>

2、ng-bind指令

ng-bind指令在绑定的值包含HTML时会转义，为了安全（跨站脚本攻击）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <title>ng-bind-html 指令</title>
 7 </head>
 8 
 9 <body ng-app="myApp" ng-init="username='<h1>shit</h1>'">
10   <!-- <strong>{{username}}</strong> -->
11   <!-- ng-bind指令在绑定的值包含HTML时会转义，为了安全（跨站脚本攻击） -->
12   <strong ng-bind-html="username"></strong>
13   <script src="bower_components/angular/angular.js"></script>
14   <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
15   <script>
16     // 使用自定义的模块才可以依赖别的包里面定义模块，angular定义的默认模块没有依赖任何
17     angular.module('myApp', ['ngSanitize']);
18   </script>
19 </body>
20 
21 </html>

3、ng-repeat指令

ng-repeat指令用来编译一个数组重复创建当前元素，如

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>ng-repeat 指令</title>
 6 </head>
 7 
 8 <body ng-app="myApp">
 9 
10 <ul ng-controller="ListController">
11   <!-- ng-repeat 会遍历数组中每一个元素，分别创建li -->
12   <li ng-repeat="item in ledamei track by $index" data-id="{{item.id}}">
13     <span>{{$first?'开始':''}}</span>
14     <strong>{{item.name}}</strong>
15     &nbsp;&nbsp;&nbsp;&nbsp;
16     <span>{{item.age}}</span>
17     <span>{{$last?'没有了':''}}</span>
18   </li>
19 </ul>
20 
21   <script src="bower_components/angular/angular.js"></script>
22   <script>
23     angular.module('myApp', [])
24       .controller('ListController', ['$scope', function($scope) {
25 
26 
27         $scope.ledamei = [];
28 
29         for (var i = 1; i < 10; i++) {
30           $scope.ledamei[$scope.ledamei.length] = {
31             id: i,
32             name: '乐乐' + i,
33             age: 20 + i
34           };
35         }
36 
37 
38       }]);
39   </script>
40 </body>
41 
42 </html>

4、ng-class 指令

ng-class指令可以设置一个键值对，用于决定是否添加一个特定的类名，键为class名，值为bool类型表示是否添加该类名

1 <ul class="messages">
2 
3     <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">
4 
5         {{item.content}}
6 
7     </li>
8 
9 </ul>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <title>ng-repeat 指令</title>
 7   <style>
 8     .red {
 9       color: red;
10     }
11 
12     .green {
13       color: green;
14     }
15   </style>
16 </head>
17 
18 <body ng-app="myApp">
19   <input type="text" ng-model="lastname">
20   <ul ng-controller="ListController">
21     <li ng-repeat="name in students track by $id($index)" ng-class="{red:lastname!=''&&name.startsWith(lastname)}">{{name}}</li>
22   </ul>
23   <script src="bower_components/angular/angular.js"></script>
24   <script>
25     angular.module('myApp', [])
26       .controller('ListController', ['$scope', function($scope) {
27 
28 
29         $scope.students = ['邓乐', '赵四', '王明', '张晓', '李三', '李三'];
30 
31 
32       }]);
33   </script>
34 </body>
35 
36 </html>

5、ng-show/ng-hide 指令

ng-show/ng-hide指令会根据属性值去确定是否展示当前元素，例如ng-show=false则不会展示该元素

1 <ul class="messages">
2 
3     <li ng-repeat="item in messages track by $index" ng-show="item.read">
4 
5         {{item.content}}
6 
7     </li>
8 
9 </ul>

6、ng-if是指是否存在DOM元素

7、ng-link/ng-src 指令

ng-link/ng-src指令用于解决当链接类型的数据绑定时造成的加载BUG，如

1 <!-- 浏览器在解析HTML时会去请求{{item.url}}文件 -->
2 
3 <img src="{{item.url}}">
4 
5 <!-- 可以使用ng-src解决该问题 -->
6 
7 <img ng-src="{{item.url}}">

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <title>ng-src</title>
 7   <script src="bower_components/angular/angular.js"></script>
 8 </head>
 9 
10 <body ng-app ng-init="imgUrl='22.png'" ng-cloak>
11   <img ng-src="{{imgUrl}}" alt="">
12 
13   <a ng-href="{{imgUrl}}">跳转到图片</a>
14 </body>
15 
16 </html>

8、ng-switch

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>ng-switch 指令</title>
 6 </head>
 7 <body ng-app>
 8   <select ng-model="selected">
 9     <option value="1">1</option>
10     <option value="2">2</option>
11     <option value="3">3</option>
12   </select>
13   <div ng-switch="selected">
14     <div ng-switch-when="1">
15       你选择的是1
16     </div>
17     <div ng-switch-when="2">
18       你选择的是2
19     </div>
20     <div ng-switch-when="3">
21       你选择的是3
22     </div>
23     <div ng-switch-default>
24       你什么都没选
25     </div>
26   </div>
27 
28   <script src="bower_components/angular/angular.js"></script>
29 </body>
30 </html>

9、ng-checked

ng-checked 和 ng-selected 只会做数据到视图的同步，不会做视图到数据的同步

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <title>ng-xxx 其他指令</title>
 7 </head>
 8 
 9 <body ng-app>
10   <p>
11     <input type="checkbox" ng-model="checked">全选/取消全选</p>
12   <ul>
13     <!-- ng-checked 和 ng-selected 只会做数据到视图的同步，不会做视图到数据的同步 -->
14     <li>选项01
15       <input type="checkbox" ng-checked="checked">
16     </li>
17     <li>选项02
18       <input type="checkbox" ng-checked="checked">
19     </li>
20     <li>选项03
21       <input type="checkbox" ng-checked="checked">
22     </li>
23     <li>选项04
24       <input type="checkbox" ng-checked="checked">
25     </li>
26     <li>选项05
27       <input type="checkbox" ng-checked="checked">
28     </li>
29   </ul>
30   <script src="bower_components/angular/angular.js"></script>
31 </body>
32 
33 </html>

10、其他常用指令

ng-model

ng-class

ng-show/ng-hide/ng-if

ng-click

ng-link/ng-src

11、自定义指令

AngularJS中可以通过代码自定义指令：

 1 myModule.directive('hello', function() {
 2 
 3     return {
 4 
 5         restrict: 'E',
 6 
 7         template: '<h1>Hello world</h1>',
 8 
 9         replace: true
10 
11     };
12 
13 });
14 
15 myApp.directive("ngHover", function() {
16 
17     return function(scope, element, attrs) {
18 
19         element.bind("mouseenter", function() {
20 
21             element.css("background", "yellow");
22 
23         });
24 
25         element.bind("mouseleave", function() {
26 
27             element.css("background", "none");
28 
29         });
30 
31     }
32 
33 });