快捷導(dǎo)航

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

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

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

學(xué)習(xí)要點(diǎn)
•為什么使用指令
•創(chuàng)建自定義指令
•使用jqLite工作

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

二、自定義指令
接下來(lái)，我們來(lái)做一個(gè)小案例，當(dāng)鼠標(biāo)單擊加價(jià)后，列表項(xiàng)自動(dòng)遞增，當(dāng)然列表也是通過(guò)指令自動(dòng)添加的，它本就是一個(gè)空的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">
      <!-- 點(diǎn)擊加價(jià)，價(jià)格遞增 -->
      <button type="button" class="btn btn-primary" ng-click="incrementPrices()">加價(jià)</button>
    </div>
    <div class="panel-body">
      <!-- 將products數(shù)據(jù)以一種無(wú)序列表的形式展示 -->
      <!-- list-property="price | currency" 列表項(xiàng)單位本地化 -->
      <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 應(yīng)用該指令的元素
    // attrs 使用該指令的元素的屬性
    return function (scope, element, attrs) {
      // attrs['unorderlist'] 獲取unorderlist屬性值，這里為products
      // 獲取數(shù)據(jù)模型值，這里為scope.products
      var data = scope[attrs['unorderlist']];
      // 創(chuàng)建一個(gè)<ul>標(biāo)簽元素
      var ul = angular.element("<ul>");
      // 在應(yīng)用該指令的元素中添加<ul>
      element.append(ul);
      // 獲取listProperty屬性值，這里為price | currency
      var expression = attrs['listProperty'];
      // 判斷是否為數(shù)組
      if (angular.isArray(data)) {
        // 遍歷數(shù)據(jù)模型scope.products
        for (var i = 0; i < data.length; i++) {
          // 添加閉包,將i傳遞進(jìn)去
          (function (index) {
            // 創(chuàng)建一個(gè)<li>標(biāo)簽元素
            var li = angular.element("<li>");
            // 將<li>標(biāo)簽添加到<ul>中
            ul.append(li);
            // 監(jiān)聽(tīng)器函數(shù)，用$eval計(jì)算表達(dá)式和data[index]的值
            var watcherFn = function (watchScope) {
              return watchScope.$eval(expression, data[index]);
            }
            // 添加$watch監(jiān)聽(tīng)器監(jiān)聽(tīng)作用域的變化
            scope.$watch(watcherFn, function (newValue, oldValue) {
              // 更新li的值
              li.text(newValue);
            })
          })(i);
        }
      }
    }
  })
  .controller("defaultCtrl", function ($scope) {
    // 數(shù)據(jù)模型
    $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 }
    ];
    // 遞增價(jià)格
    $scope.incrementPrices = function () {
      for (var i = 0; i < $scope.products.length; i++) {
        $scope.products[i].price++;
      }
    }
  })
</script>
</body>
</html>

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

這里寫(xiě)圖片描述

三、使用jqLite工作
NG內(nèi)置了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是調(diào)用者<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的長(zhǎng)度和字體顏色
      console.log("Items length : " + items.length);
      console.log("Color: " + items.css("color"));
    }
  })
</script>
</body>
</html>

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

這里寫(xiě)圖片描述