這篇文章主要介紹了Angular1.x復(fù)雜指令的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為都江堰等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及都江堰網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)、都江堰網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

具體如下：

名稱	描述
compile	指定一個(gè)編譯函數(shù)
controller	為指令創(chuàng)建一個(gè)控制器函數(shù)
link	為指令指定鏈接函數(shù)
replace	指定模板內(nèi)容是否替換指令所應(yīng)用到的元素
require	聲明對某個(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將允許我們在同一個(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è)對象上定義的，意味著這個(gè)值將會在指令的哥哥實(shí)例之間所共享，而且所有相應(yīng)的視圖會同步更新。

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

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

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

.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è)指令會使得難以輸入和輸出數(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è)隔離的作用域使得指令不會繼承控制器作用域中的數(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í)，使用了圓括號，要計(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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angular1.x復(fù)雜指令的示例分析”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站aaarwkj.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標(biāo)題：Angular1.x復(fù)雜指令的示例分析-創(chuàng)新互聯(lián)
路徑分享：http://aaarwkj.com/article12/cogdgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、微信公眾號、企業(yè)網(wǎng)站制作、域名注冊、小程序開發(fā)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)