Angular1.x自定義指令實(shí)例詳解

更新時(shí)間：2017年03月01日 12:15:45 作者：stavencsdn

這篇文章主要介紹了Angular1.x自定義指令,結(jié)合實(shí)例形式分析了Angular1.x自定義指令的實(shí)現(xiàn)與使用方法,以及相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了Angular1.x自定義指令。分享給大家供大家參考，具體如下：

調(diào)用Module.directive方法，傳入指令名稱和工廠函數(shù)，返回一個(gè)對(duì)象。

指令名稱中每個(gè)大寫字母會(huì)被認(rèn)為是屬性名中的一個(gè)獨(dú)立的詞，而每個(gè)詞之間是以一個(gè)連字符分隔的。

var myApp = angular.module('myApp', [])
  .directive("unorderedList", function () {
    return function(scope, element, attrs) {
    };
  });

返回鏈?zhǔn)胶瘮?shù)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Demo</title>
  <link rel="stylesheet" href="../css/bootstrap.css" rel="external nofollow" />
  <link rel="stylesheet" href="../css/bootstrap-theme.css" rel="external nofollow" >
  <script src="../js/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3>Products</h3>
    </div>
    <div class="panel-body">
      <div unordered-list="products"></div>
    </div>
  </div>
</body>
<script>
var myApp = angular.module('myApp', [])
  .controller('myCtrl', ["$scope", 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 }
    ];
  }])
  .directive("unorderedList", function () {
    return function (scope, element, attrs) {
      var data = scope[attrs['unorderedList']];
      if( angular.isArray(data) ){
        for(var i=0, len=data.length; i<len; i++){
          console.log(data[i].name);
        }
      }
    };
  });
</script>
</html>

打破對(duì)數(shù)據(jù)屬性的依賴

設(shè)置一個(gè)元素屬性，用來(lái)動(dòng)態(tài)第設(shè)置需要參加運(yùn)算的鍵。如果屬性名是以data-為前綴的，AngularJS會(huì)在生成傳給連接函數(shù)的屬性集合時(shí)移除這一前綴。也就是說(shuō)data-list-property和list-property都會(huì)被表示為listProperty。

<div unordered-list="products" list-property="name"></div>

var data = scope[attrs['unorderedList']];
var propertyName = attrs['listProperty'];
if(angular.isArray(data)){
  var listElem = angular.element("<ul>");
  element.append(listElem);
  for(var i=0, len=data.length; i<len; i++){
    listElem.append( angular.element('<li>').text(data[i][propertyName]) );
  }
}

計(jì)算表達(dá)式

<div unordered-list="products" list-property="price | currency"></div>

添加過(guò)濾器后，自定義指令被破壞了?？梢宰屪饔糜?qū)傩灾诞?dāng)做一個(gè)表達(dá)式進(jìn)行計(jì)算。scope.$eval()接收兩個(gè)參數(shù)：要計(jì)算的表達(dá)式和需要用于執(zhí)行該計(jì)算的任意本地?cái)?shù)據(jù)。

listElem.append( angular.element('<li>').text(scope.$eval(propertyName, data[i])) );

處理數(shù)據(jù)變化

<div class="panel-body">
  <button class="btn btn-primary" ng-click="incrementPrices()">
    Change Prices
  </button>
</div>

$scope.incrementPrices = function () {
  for(var i=0,len = $scope.products.length; i<len; i++){
    $scope.products[i].price++;
  }
}

添加監(jiān)聽器

if(angular.isArray(data)){
  var listElem = angular.element("<ul>");
  element.append(listElem);
  for(var i=0, len=data.length; i<len; i++){
    var itemElem = angular.element('<li>');
    listElem.append(itemElem);
    var watchFn = function (watchScope) {
      return watchScope.$eval(propertyName, data[i]);
    };
    scope.$watch(watchFn, function (newValue, oldValue) {
      itemElem.text(newValue);
    });
  }
}

第一個(gè)函數(shù)(監(jiān)聽器函數(shù))基于作用域中的數(shù)據(jù)計(jì)算出一個(gè)值，該函數(shù)在每次作用域發(fā)生變化時(shí)都會(huì)被調(diào)用。如果該函數(shù)的返回值發(fā)生了變化，處理函數(shù)就會(huì)被調(diào)用，這個(gè)過(guò)程就像字符串表達(dá)式方式一樣。提供一個(gè)函數(shù)來(lái)監(jiān)聽，能夠從容地面對(duì)表達(dá)式中有可能帶有過(guò)濾器的數(shù)據(jù)值得情形。

第二個(gè)監(jiān)聽器函數(shù)是針對(duì)$eval()計(jì)算的表達(dá)變化，來(lái)執(zhí)行回調(diào)函數(shù)的。

以上代碼并不能正確顯示，涉及到for循環(huán)閉包問(wèn)題。

for(var i=0, len=data.length; i<len; i++){
  (function () {
    var itemElem = angular.element('<li>');
    listElem.append(itemElem);
    var index = i;
    var watchFn = function (watchScope) {
      return watchScope.$eval(propertyName, data[index]);
    };
    scope.$watch(watchFn, function (newValue, oldValue) {
      itemElem.text(newValue);
    });
  }());
}

或者

(function (i) {
  var itemElem = angular.element('<li>');
  listElem.append(itemElem);
  var watchFn = function (watchScope) {
    return watchScope.$eval(propertyName, data[i]);
  };
  scope.$watch(watchFn, function (newValue, oldValue) {
    itemElem.text(newValue);
  });
})(i);

jqLite

jqLite中element()、append()等方法的參數(shù)是HTML string or DOMElement。

return function (scope, element, attrs) {
  var listElem = element.append("<ol>");
  for (var i = 0; i < scope.names.length; i++) {
    listElem.append("<li>").append("<span>").text(scope.names[i]);
  }
}

上述添加的是字符串，最后添加只有scope.names中最后一條信息。

return function (scope, element, attrs) {
  var listElem = angular.element("<ol>");
  element.append(listElem);
  for (var i = 0; i < scope.names.length; i++) {
    listElem.append(angular.element("<li>")
        .append(angular.element("<span>").text(scope.names[i])));
  }
}

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: