Angular1.x復(fù)雜指令實(shí)例詳解

更新時(shí)間：2017年03月01日 14:25:10 作者：stavencsdn

這篇文章主要介紹了Angular1.x復(fù)雜指令,結(jié)合實(shí)例形式分析了指令的使用、模板指令、指令的作用域等概念與具體使用技巧,需要的朋友可以參考下

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

名稱	描述
compile	指定一個(gè)編譯函數(shù)
controller	為指令創(chuàng)建一個(gè)控制器函數(shù)
link	為指令指定鏈接函數(shù)
replace	指定模板內(nèi)容是否替換指令所應(yīng)用到的元素
require	聲明對(duì)某個(gè)控制器的依賴
restrict	指定指令如何使用ACEM
scope	為指令創(chuàng)建一個(gè)新的作用域或者一個(gè)隔離的作用域
template	指定一個(gè)將被插入到HTML文檔的模板
templateUrl	指定一個(gè)將被插入到HTML文檔的外部模板
transclude	指定指令是否被用于包含任意內(nèi)容

.directive('unorderedList', function () {
  return {
    link: function (scope, element, attrs) {
      var data = scope[attrs['unorderedList'] || attrs['listSource'] ];
      var propertyName = attrs['listProperty'] || "price || currency";
      if(angular.isArray(data)){
        var listElem = angular.element("<ul>");
        if(element[0].nodeName == "#comment"){
          element.parent().append(listElem);
        }else{
          element.append(listElem);
        }
        for(var i=0, len=data.length; i<len; i++){
          var itemElem = angular.element('<li>').text(scope.$eval(propertyName, data[i]));
          listElem.append(itemElem);
        }
      }
    },
    restrict:'EACM'
  };
});

如何使用指令

當(dāng)作元素使用（E）

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

當(dāng)unordered-list當(dāng)作元素使用，需要添加另外的屬性代替unordered-list屬性的作用。

var data = scope[attrs['unorderedList'] || attrs['listSource'] ];

當(dāng)作屬性使用（A）

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

當(dāng)作類的屬性值使用（C）

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

當(dāng)作注釋使用（M）

<!-- directive: unordered-list products -->

使用模板指令

.directive('unorderedList', function () {
  return {
    link: function (scope, element, attrs) {
      scope.data = scope[attrs['unorderedList']];
    },
    restrict: 'A',
    template:"<ul><li ng-repeat='item in data'>{{item.price | currency}}</li></ul>"
  };
});

使用函數(shù)作為模板

template屬性除了使用字符串，也可以指定一個(gè)函數(shù)來生成模板化的內(nèi)容。該函數(shù)傳入兩個(gè)函數(shù)（指令所應(yīng)用到的元素以及屬性集合）并返回將被插入到文檔中的HTML代碼片段。

<script type="text/javascript" id="listTemplate">
  <ul>
    <li ng-repeat="item in data">{{item.price | currency}}</li>
  </ul>
</script>
<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 {
        link: function (scope, element, attrs) {
          scope.data = scope[attrs['unorderedList']];
        },
        restrict: 'A',
        template:function () {
          return angular.element(
              document.querySelector("#listTemplate")
          ).html();
        }
      };
    });
</script>

使用外部模板

itemTemplate.html

<p>This is the form the template file</p>
<ul>
  <li ng-repeat="item in data">{{item.price | currency}}</li>
</ul>

.directive('unorderedList', function () {
  return {
    link: function (scope, element, attrs) {
      scope.data = scope[attrs['unorderedList']];
    },
    restrict: 'A',
    templateUrl:"itemTemplate.html"
  };
});

通過函數(shù)選擇一個(gè)外部模版

tableTemplate.html

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data">
      <td>{{item.name}}</td>
      <td>{{item.price | currency}}</td>
    </tr>
  </tbody>
</table>

<div unordered-list="products" template="table" class="table table-striped">
  This is where the list will go
</div>

.directive('unorderedList', function () {
  return {
    link: function (scope, element, attrs) {
      scope.data = scope[attrs['unorderedList']];
    },
    restrict: 'A',
    templateUrl: function (elem, attrs) {
      return attrs['template'] == "table" ? "tableTemplate.html" : "itemTemplate.html";
    }
  };
});

table-striped樣式并沒有起作用，設(shè)置replace屬性為true后的效果是模版內(nèi)容將替換掉指令所應(yīng)用到的div元素。

管理指令的作用域

為每個(gè)指令實(shí)例創(chuàng)建自己的作用域

設(shè)置scope屬性為true將允許我們?cè)谕粋€(gè)控制器里復(fù)用這個(gè)指令,可以避免指令共享數(shù)據(jù)值。

<div class="panel panel-default">
  <div class="panel-body" scope-demo></div>
  <div class="panel-body" scope-demo></div>
</div>

var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
  $scope.data = {name:"Staven"};
  $scope.city = "China"
}])
.directive('scopeDemo', function () {
  return {
    template: function () {
      return angular.element(document.querySelector("#scopeTemplate")).html();
    },
    scope:true
  };
});

data.name這個(gè)屬性是在一個(gè)對(duì)象上定義的，意味著這個(gè)值將會(huì)在指令的哥哥實(shí)例之間所共享，而且所有相應(yīng)的視圖會(huì)同步更新。

city是直接在控制器的作用于上被直接賦值的，意味著這個(gè)值只在此指令的作用域上有效。

創(chuàng)建隔離的作用域

對(duì)于在一個(gè)對(duì)象上定義的屬性，可能會(huì)被其他人改變。解決方法就是創(chuàng)建一個(gè)隔離的作用域，就是Angularjs為指令的每個(gè)實(shí)例創(chuàng)建一個(gè)獨(dú)立的作用域的地方，但是這個(gè)作用域并不繼承自控制器的作用域。當(dāng)scope定義屬性被設(shè)置為一個(gè)對(duì)象時(shí)，可創(chuàng)建一個(gè)隔離的作用域。隔離的作用域的最基本類型是用一個(gè)沒有屬性的對(duì)象表示。

.directive('scopeDemo', function () {
  return {
    template: function () {
      return angular.element(document.querySelector("#scopeTemplate")).html();
    },
    scope:{}
  };
});

當(dāng)創(chuàng)建在不同情況下復(fù)用的指令時(shí)，隔離的作用域是一種重要的構(gòu)件時(shí)。因?yàn)樗乐沽嗽诳刂破髯饔糜蚝椭噶钪g出現(xiàn)了意料外的交互。但是完全隔絕一個(gè)指令會(huì)使得難以輸入和輸出數(shù)據(jù)。

隔絕的作用域允許使用應(yīng)用于指令旁邊的元素上的屬性將數(shù)據(jù)值綁定到控制器作用域上。

單向綁定@：

向以@為前綴的作用域?qū)ο笊显鎏硪粋€(gè)屬性，以在一個(gè)隔離的作用力創(chuàng)建一個(gè)單向綁定。

<body ng-app="myApp" ng-controller="myCtrl">
  <div class="panel panel-default">
    <div class="panel-body">
      Direct Binding:<input ng-model="data.name" />
    </div>
    <div class="panel-body" scope-demo nameprop="{{data.name}}"></div>
  </div>
</body>
<script type="text/ng-template" id="scopeTemplate">
  <div class="panel-body">
    <p>Data Value:{{local}}</p>
  </div>
</script>
<script>
var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
  $scope.data = {name:"staven"};
}])
.directive('scopeDemo', function () {
  return {
    template: function () {
      return angular.element(document.querySelector("#scopeTemplate")).html();
    },
    scope:{
      local:"@nameprop"
    }
  };
});
</script>

local屬性的值以@為前綴，制定了屬性local的值應(yīng)該從一個(gè)來自名為nameprop的特性的單向綁定來獲得。

使用一個(gè)隔離的作用域使得指令不會(huì)繼承控制器作用域中的數(shù)據(jù)。

雙向綁定=：

向以=為前綴的作用域?qū)ο笊显鎏硪粋€(gè)屬性，以在一個(gè)隔離的作用域里創(chuàng)建一個(gè)雙向綁定。

在隔離作用于上的單向綁定總是被計(jì)算作字符串值，如果想訪問一個(gè)數(shù)組，就必須使用雙向綁定。

<div class="panel panel-default">
  <div class="panel-body">
    Direct Binding:<input ng-model="data.name" />
  </div>
  <div class="panel-body" scope-demo nameprop="data.name"></div>
</div>
<script type="text/ng-template" id="scopeTemplate">
  <div class="panel-body">
    <p>Data Value:<input ng-model="local" /></p>
  </div>
</script>
<script>
  scope:{
    local:"=nameprop"
  }
</script>

使用單向綁定時(shí)，提供了一個(gè)被"{{"和"}}"字符所包圍的綁定表達(dá)式，但是angularjs需要知道在雙向綁定中哪個(gè)屬性需要被更新，所以不需要被"{{"和"}}"包圍。

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

向以&為前綴的作用域?qū)ο笊显鎏硪粋€(gè)屬性，在父作用域的上下文計(jì)算一個(gè)表達(dá)式。

<body ng-app="myApp" ng-controller="myCtrl">
<div class="panel panel-default">
  <div class="panel-body">
    Direct Binding:<input ng-model="data.name" />
  </div>
  <div class="panel-body" scope-demo city="getCity(data.name)" nameprop="data.name"></div>
</div>
</body>
<script type="text/ng-template" id="scopeTemplate">
  <div class="panel-body">
    <p>Name:{{local}}, City:{{cityFn()}}</p>
  </div>
</script>
<script>
var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
  $scope.data = {name:"staven",defaultCity:"hefei"};
  $scope.getCity = function (name) {
    console.log(1);
    return name == 'staven' ? $scope.data.defaultCity : "Unknown";
  }
}])
.directive('scopeDemo', function () {
  return {
    template: function () {
      return angular.element(document.querySelector("#scopeTemplate")).html();
    },
scope:{
  local:"=nameprop",
  cityFn:"&city"
}
  };
});
</script>

調(diào)用cityFn()時(shí)，使用了圓括號(hào)，要計(jì)算被這個(gè)特性所指定的表達(dá)式，這是必需的，即使當(dāng)表達(dá)式本身就是一個(gè)函數(shù)調(diào)用時(shí)。

使用隔離作用域的數(shù)據(jù)來計(jì)算一個(gè)表達(dá)式

可以將來自代計(jì)算的隔離作用域的數(shù)據(jù)為控制器作用域表達(dá)式的一部分。

<div class="panel-body" scope-demo city="getCity(nameVal)" nameprop="data.name"></div>
<script type="text/ng-template" id="scopeTemplate">
  <div class="panel-body">
    <p>Name:{{local}}, City:{{cityFn({nameVal: local})}}</p>
  </div>
</script>

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

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

您可能感興趣的文章: