指令（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 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 });
