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

2019-11-20 09:34:29

字體：大中小

供稿：網(wǎng)友

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

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

二、自定義指令
接下來，我們來做一個(gè)小案例，當(dāng)鼠標(biāo)單擊加價(jià)后，列表項(xiàng)自動(dòng)遞增，當(dāng)然列表也是通過指令自動(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ù)以一種無序列表的形式展示 -->      <!-- 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)聽器函數(shù)，用$eval計(jì)算表達(dá)式和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) {    // 數(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)簽的作用是：通過作用域數(shù)據(jù)模型的值，將其值以無序列表的方式展示出來
第三部：并且在單擊加價(jià)按鈕時(shí)，無序列表的值會(huì)依次遞增

這里寫圖片描述

三、使用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)用并且使用指令

這里寫圖片描述