第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过后就不会再找

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>ng-app 指令</title>

 </head>

 <body ng-app="myApp">

   <!-- angular找到第一个ng-app过后就不会再找 -->

   <div ng-controller="App1Controller">

     <input type="button" value="按钮1" ng-click="do1()">

   </div>

   <div ng-controller="App2Controller">

     <input type="button" value="按钮2" ng-click="do2()">

   </div>

   <script src="bower_components/angular/angular.js"></script>

   <script>

     // 零件1

     var myApp1 = angular.module('myApp1', []);

     myApp1.controller('App1Controller', ['$scope', function($scope) {

       $scope.do1 = function() {

         console.log(11111);

       };

     }]);

     // 零件2

     var myApp2 = angular.module('myApp2', []);

     myApp2.controller('App2Controller', ['$scope', function($scope) {

       $scope.do2 = function() {

         console.log(22222);

       };

     }]);

     angular.module('myApp', ['myApp1', 'myApp2']);

   </script>

 </body>

 </html>

2、ng-bind指令

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>ng-bind-html 指令</title>

 </head>

 <body ng-app="myApp" ng-init="username='<h1>shit</h1>'">

   <!-- <strong>{{username}}</strong> -->

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

   <strong ng-bind-html="username"></strong>

   <script src="bower_components/angular/angular.js"></script>

   <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

   <script>

     // 使用自定义的模块才可以依赖别的包里面定义模块，angular定义的默认模块没有依赖任何

     angular.module('myApp', ['ngSanitize']);

   </script>

 </body>

 </html>

3、ng-repeat指令

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>ng-repeat 指令</title>

 </head>

 <body ng-app="myApp">

 <ul ng-controller="ListController">

   <!-- ng-repeat 会遍历数组中每一个元素，分别创建li -->

   <li ng-repeat="item in ledamei track by $index" data-id="{{item.id}}">

     <span>{{$first?'开始':''}}</span>

     <strong>{{item.name}}</strong>

     &nbsp;&nbsp;&nbsp;&nbsp;

     <span>{{item.age}}</span>

     <span>{{$last?'没有了':''}}</span>

   </li>

 </ul>

   <script src="bower_components/angular/angular.js"></script>

   <script>

     angular.module('myApp', [])

       .controller('ListController', ['$scope', function($scope) {

         $scope.ledamei = [];

         for (var i = 1; i < 10; i++) {

           $scope.ledamei[$scope.ledamei.length] = {

             id: i,

             name: '乐乐' + i,

             age: 20 + i

           };

         }

       }]);

   </script>

 </body>

 </html>

4、ng-class 指令

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

 <ul class="messages">

     <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">

         {{item.content}}

     </li>

 </ul>

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>ng-repeat 指令</title>

   <style>

     .red {

       color: red;

     }

     .green {

       color: green;

     }

   </style>

 </head>

 <body ng-app="myApp">

   <input type="text" ng-model="lastname">

   <ul ng-controller="ListController">

     <li ng-repeat="name in students track by $id($index)" ng-class="{red:lastname!=''&&name.startsWith(lastname)}">{{name}}</li>

   </ul>

   <script src="bower_components/angular/angular.js"></script>

   <script>

     angular.module('myApp', [])

       .controller('ListController', ['$scope', function($scope) {

         $scope.students = ['邓乐', '赵四', '王明', '张晓', '李三', '李三'];

       }]);

   </script>

 </body>

 </html>

5、ng-show/ng-hide 指令

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

 <ul class="messages">

     <li ng-repeat="item in messages track by $index" ng-show="item.read">

         {{item.content}}

     </li>

 </ul>

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

7、ng-link/ng-src 指令

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

 <!-- 浏览器在解析HTML时会去请求{{item.url}}文件 -->

 <img src="{{item.url}}">

 <!-- 可以使用ng-src解决该问题 -->

 <img ng-src="{{item.url}}">

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>ng-src</title>

   <script src="bower_components/angular/angular.js"></script>

 </head>

 <body ng-app ng-init="imgUrl='22.png'" ng-cloak>

   <img ng-src="{{imgUrl}}" alt="">

   <a ng-href="{{imgUrl}}">跳转到图片</a>

 </body>

 </html>

8、ng-switch

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>ng-switch 指令</title>

 </head>

 <body ng-app>

   <select ng-model="selected">

     <option value="1">1</option>

     <option value="2">2</option>

     <option value="3">3</option>

   </select>

   <div ng-switch="selected">

     <div ng-switch-when="1">

       你选择的是1

     </div>

     <div ng-switch-when="2">

       你选择的是2

     </div>

     <div ng-switch-when="3">

       你选择的是3

     </div>

     <div ng-switch-default>

       你什么都没选

     </div>

   </div>

   <script src="bower_components/angular/angular.js"></script>

 </body>

 </html>

9、ng-checked

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>ng-xxx 其他指令</title>

 </head>

 <body ng-app>

   <p>

     <input type="checkbox" ng-model="checked">全选/取消全选</p>

   <ul>

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

     <li>选项01

       <input type="checkbox" ng-checked="checked">

     </li>

     <li>选项02

       <input type="checkbox" ng-checked="checked">

     </li>

     <li>选项03

       <input type="checkbox" ng-checked="checked">

     </li>

     <li>选项04

       <input type="checkbox" ng-checked="checked">

     </li>

     <li>选项05

       <input type="checkbox" ng-checked="checked">

     </li>

   </ul>

   <script src="bower_components/angular/angular.js"></script>

 </body>

 </html>

10、其他常用指令

ng-model

ng-class

ng-show/ng-hide/ng-if

ng-click

ng-link/ng-src

11、自定义指令

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

 myModule.directive('hello', function() {

     return {

         restrict: 'E',

         template: '<h1>Hello world</h1>',

         replace: true

     };

 });

 myApp.directive("ngHover", function() {

     return function(scope, element, attrs) {

         element.bind("mouseenter", function() {

             element.css("background", "yellow");

         });

         element.bind("mouseleave", function() {

             element.css("background", "none");

         });

     }

 });