AngularJS優(yōu)雅的自定義指令

更新時間：2016年07月01日 14:29:40 作者：super_yang_android

這篇文章主要介紹了AngularJS優(yōu)雅的自定義指令，告訴大家為什么使用AngularJS自定義指令，以及如何使用AngularJS自定義指令？感興趣的小伙伴們可以參考一下

學習要點
•為什么使用指令
•創(chuàng)建自定義指令
•使用jqLite工作

一、為什么使用自定義指令
NG內置了許多自定義指令，但是它們有時并不能滿足你的要求，這是需要我們創(chuàng)建自定義屬性。

二、自定義指令
接下來，我們來做一個小案例，當鼠標單擊加價后，列表項自動遞增，當然列表也是通過指令自動添加的，它本就是一個空的div

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel-heading">
       <h3>Products</h3>
    </div>
    <div class="panel-body">
      <!-- 點擊加價，價格遞增 -->
      <button type="button" class="btn btn-primary" ng-click="incrementPrices()">加價</button>
    </div>
    <div class="panel-body">
      <!-- 將products數據以一種無序列表的形式展示 -->
      <!-- list-property="price | currency" 列表項單位本地化 -->
      <div unorderlist="products" list-property="price | currency"></div>
    </div>
  </dlv>

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

<script type="text/javascript">

angular.module("exampleApp", [])
  .directive("unorderlist", function () {
    // scope 作用域
    // element 應用該指令的元素
    // attrs 使用該指令的元素的屬性
    return function (scope, element, attrs) {
      // attrs['unorderlist'] 獲取unorderlist屬性值，這里為products
      // 獲取數據模型值，這里為scope.products
      var data = scope[attrs['unorderlist']];
      // 創(chuàng)建一個<ul>標簽元素
      var ul = angular.element("<ul>");
      // 在應用該指令的元素中添加<ul>
      element.append(ul);
      // 獲取listProperty屬性值，這里為price | currency
      var expression = attrs['listProperty'];
      // 判斷是否為數組
      if (angular.isArray(data)) {
        // 遍歷數據模型scope.products
        for (var i = 0; i < data.length; i++) {
          // 添加閉包,將i傳遞進去
          (function (index) {
            // 創(chuàng)建一個<li>標簽元素
            var li = angular.element("<li>");
            // 將<li>標簽添加到<ul>中
            ul.append(li);
            // 監(jiān)聽器函數，用$eval計算表達式和data[index]的值
            var watcherFn = function (watchScope) {
              return watchScope.$eval(expression, data[index]);
            }
            // 添加$watch監(jiān)聽器監(jiān)聽作用域的變化
            scope.$watch(watcherFn, function (newValue, oldValue) {
              // 更新li的值
              li.text(newValue);
            })
          })(i);
        }
      }
    }
  })
  .controller("defaultCtrl", function ($scope) {
    // 數據模型
    $scope.products = [
      { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
      { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
      { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
    ];
    // 遞增價格
    $scope.incrementPrices = function () {
      for (var i = 0; i < $scope.products.length; i++) {
        $scope.products[i].price++;
      }
    }
  })
</script>
</body>
</html>

解析：
第一步：創(chuàng)建控制器，添加數據模型products和遞增價格incrementPrices()方法
第二步：自定義unorderlist標簽，該標簽的作用是：通過作用域數據模型的值，將其值以無序列表的方式展示出來
第三部：并且在單擊加價按鈕時，無序列表的值會依次遞增

這里寫圖片描述

三、使用jqLite工作
NG內置了jqLite，它是JQuery的縮小版

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
  <dlv class="panel panel-default">
    <!-- 使用自定義指令 -->
    <ol dome-directive>
      <li>Apples</li>
      <ul>
        <li>Bananas</li>
        <li>Cherries</li>
        <li>Oranges</li>
      </ul>
      <li>Pears</li>
      <li>Oranges</li>
    </ol>
  </dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("exampleApp", [])
  .directive("domeDirective", function () {
    return function (scope, element, attrs) {
      // 找出element元素下所有的li,這里的element是調用者<ol>
      var items = element.find("li");
      // 要所有的li的font-weight為bold
      items.css("font-weight", "bold");
      // 遍歷li, 值為Oranges的字體顏色為red,其余為green
      for (var i = 0; i < items.length; i++) {
        if (items.eq(i).text() == "Oranges"){
          items.eq(i).css("color", "red");
        } else {
          items.eq(i).css("color", "green");
        }
      }
      // 打印出li的長度和字體顏色
      console.log("Items length : " + items.length);
      console.log("Color: " + items.css("color"));
    }
  })
</script>
</body>
</html>

解析：
第一步：自定義控制器，定義數據模型names
第二步：自定義指令，功能是將使用指令的元素下的所有l(wèi)i找出，并且更加值的不同賦給字體不同的顏色
第三步：在視圖中調用并且使用指令

這里寫圖片描述