指令Directive

時間 2019-11-09

標籤指令 directive 简体版

原文原文鏈接

1.ng-app

做用：規定Angular範圍


建立多個ng-app時默認只執行第一個
可用模塊合併解決
<body ng-app="app">
    <div ng-controller="demo1" ng-click="demo1()"></div>
    <div ng-controller="demo2" ng-click="demo2()"></div>


    <script src="../bower_components/angular/angular.js"></script>
    <script type="text/javascript">


        angular.module('app1', []).controller('demo1', ['$scope', function($scope){
            console.log(11111);
        }]);
        angular.module('app2', []).controller('demo2', ['$scope', function($scope){
            console.log(22222);
        }]);


        //模塊合併
        angular.module('app', ['app1', 'app2']);
    </script>
</body>

2.ng-repeat

/*
http://www.angularjsapi.cn/#/ngRepeat
$index    number    循環的索引值
$first    boolean    是否第一次循環
$middle    boolean    是否第一次和最後一次循環之間的循環。
$last    boolean    是否最後一次循環。
$even    boolean    是否循環的次數$index爲偶數。
$odd    boolen    是否循環的次數$index爲奇數
*/

<body ng-app="app">


    <ul ng-controller="demo1Controller">
        <li ng-repeat="value in data">
            <span>{{$first ? $index : ''}}</span>
            <span>{{value.id}}</span>
            <span>{{value.name}}</span>
            <span>{{value.age}}</span>
        </li>
    </ul>


    <script src="../bower_components/angular/angular.js"></script>
    <script type="text/javascript">


      angular.module('app', []).controller('demo1Controller', ['$scope', function($scope){


          $scope.data = [];


          for (var i = 10 - 1; i >= 0; i--) {
              var obj = {
                    id: i,
                    name: '名字是:' + i,
                    age: '年齡是:' + i
              };
              $scope.data.push(obj);
          }


      }])


    </script>
</body>

 1 <!-- 
 2 track by 
 3 若是數組內元素有重複，使用track by解決
 4 -->
 5 <body ng-app="app">
 6     <ul ng-controller="appController">
 7       <li ng-repeat="value in data track by $index">
 8         <span>{{value}}</span>
 9       </li>
10     </ul>
11     
12     <script src="../node_modules/angular/angular.js"></script>
13     <script type="text/javascript">
14          angular.module('app', [])
15          .controller('appController', ['$scope', function($scope){
16             $scope.data = ['小李子', '小孫子', '小孫子'];
17          }])
18     </script>
19 </body>

3.ng-class

<!--一、若是表達式是一個字符串，字符串應該是一個或多個空格分隔的類名稱。-->
<!--二、若是表達式是數組，數組中的每一個元素應該是一個字符串，即一個或多個空格分隔的類名稱。-->
<!--三、若是表達式是一個對象，應用相應的類名稱做爲key 值爲true或false。-->
<!--四、若是特定類別已被設置，該指令將不會添加劇復類。-->


  <style type="text/css">
      .red {
        color: red;
      }
      .green {
        color: green;
      }
  </style>
</head>
<body ng-app="app">
    <!-- ng-class: 會根據當前設置對象的屬性和屬性值決定是否添加特定類名 -->
    <ul ng-controller="demo1Controller" >
        <li ng-repeat="value in data" ng-class="{red:$even,green:$odd}">
            <span>{{value.id}}</span>
            <span>{{value.name}}</span>
            <span>{{value.age}}</span>
        </li>
    </ul>



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

 1 <style>
 2     .red{
 3       background-color: red;}
 4 
 5     .green{
 6       background-color: green;}
 7 
 8     #box{
 9       height: 200px;
10       width: 200px;transition:background-color 1s ease;
11 }
12 </style>
13 </head>
14 <body ng-app>
15 <select ng-model="style">
16 <option value="red">紅色</option>
17 <option value="green">綠色</option>
18 </select>
19 
20   <!-- <div id="box" ng-class="style"></div> -->
21 <div id="box" ng-class="{red:style=='red', green:style=='green'}"></div>
22 
23 <script src="bower_components/angular/angular.js"></script>
24 </body>

4.ng-bind ng-bind-html

將做用域(scope)中的值綁定到元素的innerHTML上javascript

ng-bind在綁定的值包含HTML時會轉義，爲了安全(跨站攻擊)css

1     <!-- ng-bind -->
2     <div ng-app="app" ng-init="username='shit'">
3         <span ng-bind="username"></span>
4     </div>

 1     <!-- ng-bind-html -->
 2     <div ng-app="app" ng-init="username='<p>shit<p>'">
 3        <!-- 
 4         在頁面當中綁定一個不安全的值的話，必需要去引用ng官方提供的庫，作安全校驗
 5         $sanitize : 安全檢驗模塊
 6         須要下載包 cnpm install angular-sanitize,並引用
 7         --> 
 8         <span ng-bind-html="username"></span>
 9     </div>
10 
11     <script src="../node_modules/angular/angular.js"></script>
12     <script src="../node_modules/angular-sanitize/angular-sanitize.js"></script>
13     <script type="text/javascript">
14          // 使用本身定義的模塊才能夠依賴別的包裏面定義的模塊
15          // ng默認模塊沒有依賴任何模塊
16          angular.module('app', ['sanitize'])
17     </script>

5.ng-cloak 在頁面不顯示{{ }}，在head導入Angular

<span ng-app ng-cloak>{{'222'}}</span>

6.ng-show ng-hide ng-if

1 <!-- 
2 ng-show:是否顯示 true false
3 ng-hide:是否隱藏
4 ng-if:是否存在 
5 -->
6 <span ng-app ng-show="false">{{'222'}}</span>

7.ng-switch

 1 <body ng-app>
 2   <select ng-model="selected">
 3     <option value="1">1</option>
 4     <option value="2">2</option>
 5     <option value="3">3</option>
 6   </select>
 7   <div ng-switch="selected">
 8     <div ng-switch-when="1">
 9       <h1>1111</h1>
10     </div>
11     <div ng-switch-when="2">
12       <h1>2222</h1>
13     </div>
14     <div ng-switch-when="3">
15       <h1>3333</h1>
16     </div>
17     <div ng-switch-default>
18       <h1>0000</h1>
19     </div>
20   </div>
21 </body>

8.ng-checked

 1 <body ng-app>
 2   <p><input type="checkbox" ng-model="checked">全選</p>
 3   <ul>
 4     <li>選項1<input type="checkbox" ng-checked="checked"></li>
 5     <li>選項2<input type="checkbox" ng-checked="checked"></li>
 6     <li>選項3<input type="checkbox" ng-checked="checked"></li>
 7     <li>選項4<input type="checkbox" ng-checked="checked"></li>
 8     <li>選項5<input type="checkbox" ng-checked="checked"></li>
 9   </ul>
10 </body>

9.自定義指令

 <script>
   angular.module('app', [])

   //指令就是將html代碼進行封裝
   .directive('custDirective', [function(){
     // Runs during compile
     return {
       // 指令名
       // name: '',
       
       // priority多個指令設置在同一個元素上的執行優先級,
       // 執行順序從低至高:1>2>3.priority的值爲正整數，好比priority: 1,
       // priority: 1,
       
       // 若是爲true,同一個元素上的其餘指令的優先級高於本指令
       // terminal: true,
       
       // 指令默認能共享父 scope 中定義的屬性
       // 能夠定義一個隔離的scope
       // @：只能綁定字符串，因此一些簡單的繼承父scope的屬性使用@
       // =：須要實現雙向數據綁定的時候使用=，屬性和父類的相等
       // &： 提供一種方式執行一個表達式在父scope的上下文中，即便用於將父scope中的函數綁定在指令的scope中
       // scope: {}, // {} = isolate, true = child, false/undefined = no change
       
       // controller: function($scope, $element, $attrs, $transclude) {},
       // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
      
       // 指定當前指令的類型 
       // E = 元素, <my-ment></my-menu>
       // A = 屬性, <div my-ment></div>
       // C = 類,   <div class=my-menu></div>
       // M = html中的註釋<!-- directive: my-menu -->  
       // <!-- 兩邊必定要留空格，否則什麼都不會發生 -->
       //restrict: 'A', 
       
       //模板字符串
       template: '<div>我是指令的生成內容</div>',
       
       //導入一個html文件
       //templateUrl: 'template/demo.html',
       
       //是否用模板替換當前元素
       replace: true,

       // 是否使用ng-transculde來包含html中指令包含的原有的內容
       // transclude: true,
       

       // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
       link: function($scope, iElm, iAttrs, controller) {
         
       }
     };
   }]);
 </script>

（1）先說@


app.controller("ctl1", function ($scope) {
        $scope.name = "hello world";
    }).directive("testDirective", function () {
        return {
            scope: {
                name: "@"
            },
            template: 'Say：{{name}} <br>改變隔離scope的name：<input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid">'
        }
})


<div ng-controller="ctl1">
   <div>
       <div>父scope：
           <div>Say：{{name}}<br>改變父scope的name：<input type="text" value="" ng-model="name"/></div>
       </div>
       <div>隔離scope：這個顯示爲hello world
           <div test-directive name="{{name}}"></div>
       </div>
        <div>隔離scope（不使用{{name}}這個就直接顯示爲name了）：
             <div test-directive name="name"></div> 
         </div>
   </div>

咱們在test-directive指令所在的div上面，增長了一個name屬性，要使用雙花括號來給屬性賦值。也能夠寫成nameCopy:'@nameForCtl',這樣寫，在給directive中的scope的屬性賦值的時候，獲取查詢@後面的name這個標識對應的屬性的值（這裏nameForCtl在js中是駝峯寫法，一樣的在html中對應的屬性名應該寫成name-for-ctl）。不是很推薦這種寫法，感受有點多餘。

上一個例子中，咱們使用name="{{name}}"的形式來傳遞父scope 的屬性對應的值，so，咱們只是把對應的值傳遞給了directive的scope，當我想實如今directive中改變父scope傳遞過來的值時，父scope中的值也對應的改變，顯然用@這種方法走不通。html

app.controller("ctl1", function ($scope) {
        $scope.user = {
            name: 'hello',
            id: 1
        };
    }).directive("testDirective", function () {
        return {
            scope: {
                user: "="
            },
            template: 'Say：{{user.name}} <br>改變隔離scope的name：<input type="buttom" value="" ng-model="user.name"/>'
        }
    })

<div ng-controller="ctl1">
    <div>父scope：
        <div>Say：{{user.name}}<br>改變父scope的name：<input type="text" value="" ng-model="user.name"/></div>
    </div>
    <div>隔離scope：
        <div isolated-directive user="user"></div>
    </div>
    <div>隔離scope（使用{{name}}，這個會報錯）：
        <div isolated-directive user="{{user}}"></div> 
    </div>
</div>

這一個例子和上一個例子不一樣的地方就是屬性賦值的時候，一個應該使用{{}},一個不應使用。=爲了實現雙向數據綁定，angular會使用‘=’對應的屬性的值與父scope中的屬性進行匹配，而後傳遞給diractive中的scope。至於實現的細節和原理，這裏我就不說了（實際上是不大清楚）。java

（3）&node

& 方式提供一種途經使directive 能在父 scope 的上下文中執行一個表達式。此表達式能夠是一個 function。其實說白了，就是可使用在父scope中定義的函數。angularjs

好比：當你寫了一個 directive，當用戶點擊按鈕時，directive 想要通知 controller，controller 沒法知道 directive 中發生了什麼，也許你能夠經過使用 angular 中的 event 廣播來作到，可是必需要在 controller 中增長一個事件監聽方法。
最好的方法就是讓 directive 能夠經過一個父 scope 中的 function，當 directive 中有什麼動做須要更新到父 scope 中的時候，能夠在父 scope 上下文中執行一段代碼或者一個函數。npm

app.controller("ctl1", function ($scope) {
        $scope.value = "hello world";
        $scope.click = function () {
            $scope.value = Math.random();
        };
    }).directive("testDirective", function () {
        return {
            scope: {
                action: "&"
            },
            template: '<input type="button" value="在directive中執行父scope定義的方法" ng-click="action()"/>'
        }
    })

<div  ng-controller="ctl1">
        <div>父scope：
            <div>Say：{{value}}</div>
        </div>
        <div>隔離scope：
            <div isolated-directive action="click()"></div>
        </div>
</div>

在上面的例子中，咱們的屬性action賦值爲一個方法：action="click()"。api

9.過濾器

 1 <body ng-app="app">
 2 
 3 <!-- 
 4   將true或false傳入到過濾器來肯定checkmark顯示什麼 
 5   可傳遞多參數 ：的形式
 6 -->
 7 <h1>{{true | checkmark : 1}}</h1>
 8 
 9 <script>
10   angular.module('app', [])
11          .filter('checkmark', function() {
12             
13             //過濾器執行的函數
14             return function(input, type){
15              
16               console.log(type);
17               
18               //input 傳遞進來的參數true或false、
19               // return input ? '\u2713' : '\u2718';
20               if (type == 1) {
21                 return '\u2713';
22               }else {
23                 return '\u2718';
24               }
25             }
26   });
27 </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。