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

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

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

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

名稱	描述
compile	指定一個編譯函數(shù)
controller	為指令創(chuàng)建一個控制器函數(shù)
link	為指令指定鏈接函數(shù)
replace	指定模板內(nèi)容是否替換指令所應(yīng)用到的元素
require	聲明對某個控制器的依賴
restrict	指定指令如何使用ACEM
scope	為指令創(chuàng)建一個新的作用域或者一個隔離的作用域
template	指定一個將被插入到HTML文檔的模板
templateUrl	指定一個將被插入到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'
  };
});

如何使用指令

當作元素使用（E）

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

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

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

當作屬性使用（A）

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

當作類的屬性值使用（C）

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

當作注釋使用（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屬性除了使用字符串，也可以指定一個函數(shù)來生成模板化的內(nèi)容。該函數(shù)傳入兩個函數(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ù)選擇一個外部模版

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元素。

管理指令的作用域

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

設(shè)置scope屬性為true將允許我們在同一個控制器里復(fù)用這個指令,可以避免指令共享數(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這個屬性是在一個對象上定義的，意味著這個值將會在指令的哥哥實例之間所共享，而且所有相應(yīng)的視圖會同步更新。

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

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

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

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

當創(chuàng)建在不同情況下復(fù)用的指令時，隔離的作用域是一種重要的構(gòu)件時。因為它防止了在控制器作用域和指令之間出現(xiàn)了意料外的交互。但是完全隔絕一個指令會使得難以輸入和輸出數(shù)據(jù)。

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

單向綁定@：

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

<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)該從一個來自名為nameprop的特性的單向綁定來獲得。

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

雙向綁定=：

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

在隔離作用于上的單向綁定總是被計算作字符串值，如果想訪問一個數(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>

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

計算表達式&：

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

<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ù)調(diào)用時。

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

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

<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入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

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

您可能感興趣的文章: