AngularJS的指令怎麼使用？ angularjs的指令使用詳情（附程式碼實例）

本篇文章主要的介紹了關於angularjs的指令實例，第一個就是使用angularjs中的手風琴指令實例，還定義了指令，現在就讓我們一起來看看這篇文章吧

關於angularjs的前言：

之前我們已經介紹了所有的AngularJS 基礎知識，下面讓我們透過實例來加深記憶，體驗自訂指令的樂趣。

手風琴指令

我們展示的第一個例子是手風琴效果指令：

效果圖如下：

##線上實例地址：手風琴指令

不使用AngularJS的純HTML源碼如下：

<p>
  </p><p>
    </p><p>
      <a>
        Collapsible Group Item #1      </a>
    </p>
    <p>
      </p><p>
        Anim pariatur cliche...      </p>
    
  
  <p>
    </p><p>
      <a>
        Collapsible Group Item #2      </a>
    </p>
    <p>
      </p><p>
        Anim pariatur cliche...      </p>
    
  

以上純HTML源碼也可以實現手風琴效果，但是它只是一些標記，包含了大量的連結和id，不利於維護。

使用AngularJS自訂指令結合以下HTML原始碼同樣可以得到預期效果：

     <h3 id="BootStrap手风琴指令">BootStrap手风琴指令</h3>

    <btst-accordion>
        <btst-pane>基本功能" category="{name:'test'}">
            <p>AngularJS......</p>
        </btst-pane>
        <btst-pane>创建自定义指令">
            <p>使用过 AngularJS ......</p>
        </btst-pane>
        <btst-pane>体验实例">
            <p>之前我们已经介绍了所有的AngularJS......</p>
        </btst-pane>
    </btst-accordion>

##這版本所使用的HTML標記較少，看起來清晰且易於維護。

下面，讓我們看下指令寫法。

首先，我們定義模組"btstAccordion" 指令：

#

var btst = angular.module("btst", []);
btst.directive("btstAccordion", function () {  return {
    restrict: "E",        
    transclude: true,      
    replace: true,        
    scope: {},            
    template:             
      "<p></p>",
    link: function (scope, element, attrs) {      // 确保 accordion拥有id
      var id = element.attr("id");      if (!id) {
        id = "btst-acc" + scope.$id;
        element.attr("id", id);
      }      // set data-parent and href attributes on accordion-toggle elements
      var arr = element.find(".accordion-toggle");      for (var i = 0; i <p class="cnblogs_code" style="background-color:#f5f5f5;border:#cccccc 1px solid;"></p><p>由於擁有內部HTML內容，所以設定指令的transclude 屬性為true。模板使用ng-transclude 指令來宣告對應的顯示內容。由於模板中只有一個元素，所以沒有設定其他選項。 </p><p>程式碼中最有趣的部分是link 方法。它在參數element具有id時啟動作用，如果沒有，會依據指令的 Scope自動建立ID。一旦元素擁有了ID值，方法將透過jQuery來選擇具有"accordion-toggle"類別的子元素並且設定它的 "data-parent" 和 "href" 屬性。最後，透過尋找“accordion-body” 元素，並且設定"collapse" 屬性。 </p><p>指令同時宣告了一個擁有空方法的controller 。聲明controller 是必要的，因為Accordion會包含子元素，子元素將檢測父元素的類型和controller 。 </p><p>下一步需要定義手風琴選項卡的指令。 </p><h2 id="這一步驟比較容易-大多數操作會在這個範本中發生-但它只需要少量的程式碼">這一步驟比較容易，大多數操作會在這個範本中發生，但它只需要少量的程式碼：</h2><p></p><pre class="brush:php;toolbar:false">btst.directive('btstPane', function () {  return {
    require: "^btstAccordion",
    restrict: "E",
    transclude: true,
    replace: true,
    scope: {
      title: "@"
    },
    template:      "<p>" +
      "  </p><p>" +
      "    <a>{{title}}</a>" +
      "  </p>" +
      "<p>" +
      "  </p><p></p>" +
      "  " +
      "",
    link: function (scope, element, attrs) {
      scope.$watch("title", function () {        // NOTE: this requires jQuery (jQLite won't do html)
        var hdr = element.find(".accordion-toggle");
        hdr.html(scope.title);
      });
    }
  };
});

require 屬性值為"btstPane" ，所以指令必須用於指令"btstAccordion"中。 transclude 屬性為true表示選項卡包含HTML標籤。 scope 下的 "title" 屬性將會被實例所取代。

這個範例中的模板比較複雜。注意我們透過ng-transclude 指令來標記元素接收文字內容。

模板中"{{title}}" 屬性將會顯示標籤名稱。目前我們僅僅實現了純文字顯示，沒有定義其樣式。我們使用link 方法可以替換標題為HTML原始碼從而得到更豐富的樣式。 （想看更多就到PHP中文網

AngularJS開發手冊

中學習）#就這樣，我們完成了第一個具有實用價值的指令。它功能並不複雜但是足以展示一些AngularJS的重要知識點和技術細節：如何定義嵌套指令，如何產生唯一的元素ID，如何使用jQuery操作DOM以及如何使用$watch 方法監聽scope變數的變化。

Google Maps 指令

下一個範例是建立Google地圖的指令：

Google Maps 指令
在我們建立指令之前，我們需要新增Google APIs 引用到頁面中：

<!-- required to use Google maps -->

<script>

</script>

#接下來，我們建立指令：

var app = angular.module("app", []);
app.directive("appMap", function () {  return {
    restrict: "E",
    replace: true,
    template: "<p></p>",
    scope: {
      center: "=",        // Center point on the map
      markers: "=",       // Array of map markers
      width: "@",         // Map width in pixels.
      height: "@",        // Map height in pixels.
      zoom: "@",          // Zoom level (from 1 to 25).
      mapTypeId: "@"      // roadmap, satellite, hybrid, or terrain
    },

center 屬性進行了雙向綁定。這個應用程式可以改變地圖中心和互動地圖（當使用者透過滑鼠按鈕選擇地圖位置時）。同時，地圖也會在使用者透過捲動選擇地圖位置時通知應用程式更新目前顯示位置。

markers 屬性被定義為引用因為它是陣列形式，把它序列化為字串比較耗時。 link 方法可以實現以下功能：

1. 初始化地圖

2. 在使用者視圖變數變更時更新地圖

3. 監聽事件

以下是實作程式碼:

link: function (scope, element, attrs) {  var toResize, toCenter;  var map;  var currentMarkers;  // listen to changes in scope variables and update the control
  var arr = ["width", "height", "markers", "mapTypeId"];  for (var i = 0, cnt = arr.length; i <p class="cnblogs_code" style="background-color:#f5f5f5;border:#cccccc 1px solid;"></p>#<p>监测方法正如我们在文章开始时描述的，变量发生变化后，它将调用updateControl 方法。updateControl 方法实际上使用selected 选项创建了新的地图。</p><p>"zoom" 和 "center" 变量将被分别处理，因为我们不希望每次在用户选择或缩放地图时都重新创建地图。这两个方法检测地图是否重新创建还是仅仅是简单的更新。</p><p>以下是updateControl 方法的实现方法：</p><p class="cnblogs_code" style="background-color:#f5f5f5;border:#cccccc 1px solid;"></p><pre class="brush:php;toolbar:false">// update the controlfunction updateControl() {  // get map options
  var options = {
    center: new google.maps.LatLng(40, -73),
    zoom: 6,
    mapTypeId: "roadmap"
  };  if (scope.center) options.center = getLocation(scope.center);  if (scope.zoom) options.zoom = scope.zoom * 1;  if (scope.mapTypeId) options.mapTypeId = scope.mapTypeId;  // create the map and update the markers
  map = new google.maps.Map(element[0], options);
  updateMarkers();  // listen to changes in the center property and update the scope
  google.maps.event.addListener(map, 'center_changed', function () {    if (toCenter) clearTimeout(toCenter);
    toCenter = setTimeout(function () {    if (scope.center) {      if (map.center.lat() != scope.center.lat ||
          map.center.lng() != scope.center.lon) {
        scope.center = { lat: map.center.lat(), lon: map.center.lng() };        if (!scope.$$phase) scope.$apply("center");
      }
    }
  }, 500);
}

updateControl 方法首先需要接收Scope设置相关参数，接着使用options 创建和初始化地图。这是创建JavaScript指令的常见模式。

创建地图之后，方法会在更新标记的同时添加检测事件，以便监视地图中心位置的变化。该事件会监测当前的地图中心是否和Scope中的相同。如果不同，即会更新scope，调用$apply 方法通知AngularJS属性已经更改。这种绑定方式为双向绑定。

updateMarkers 方法十分的简单，几乎和AngularJS分离，所以我们在这里就不介绍了。

除了这个地图指令特有的功能，这个例子还展示了：

1. 两个过滤器转换坐标为常规数字到地理位置，例如33°38'24"N, 85°49'2"W。

2. 一个地理编码器，转换成地址的地理位置（也是基于谷歌的API）。

3. 使用HTML5的地理定位服务来获取用户当前位置的方法。

Wijmo Grid 指令

最后一个例子是可编辑的表格指令：

Wijmo Grid 指令

这里展示的图表插件是 Wijmo 前端插件套包中的一款插件 wijgrid 插件：

<wij-grid>
    <wij-grid-column>
    </wij-grid-column>
    <wij-grid-column>
    </wij-grid-column>
    <wij-grid-column>
    </wij-grid-column></wij-grid>

"wij-grid" 指令定制表格的属性，"wij-grid-column" 指令定制特性表格列的属性。以上标记定义了一个拥有三列的可编辑表格，分别为：“country”， "product" 和 "amount"。并且，以country列分组并且计算每个分组的合计。

这个指令中最特别的一点是 “wij-grid”和“wij-grid-column”的连接。为了使这个连接起作用，父指令中定义了如下controller：

app.directive("wijGrid", [ "$rootScope", "wijUtil", function ($rootScope, wijUtil) {  return {
    restrict: "E",
    replace: true,
    transclude: true,
    template: "

",     scope: {       data: "=",          // List of items to bind to.       allowEditing: "@",  // Whether user can edit the grid.       afterCellEdit: "&", // Event that fires after cell edits.       allowWrapping: "@", // Whether text should wrap within cells.       frozenColumns: "@"  // Number of non-scrollable columns    },     controller: ["$scope", function ($scope) {       $scope.columns = [];      this.addColumn = function (column) {         $scope.columns.push(column);       }     }],     link: function (scope, element, attrs) {      // omitted for brevity, see full source here:        // http://jsfiddle.net/Wijmo/jmp47/    }   } }]);

关于controller 方法使用前文中提到的数组语法声明，在这个例子中，controller定义了addColumn 方法，它将会被"wij-grid-column" 指令调用。父指令会通过特定标记来访问列。

以下是"wij-grid-column" 指令的使用方法：

app.directive("wijGridColumn", function () {  return {
    require: "^wijGrid",
    restrict: "E",
    replace: true,
    template: "<p></p>",
    scope: {
      binding: "@",     // Property shown in this column.
      header: "@",      // Column header content.
      format: "@",      // Format used to display numeric values in this column.
      width: "@",       // Column width in pixels.
      aggregate: "@",   // Aggregate to display in group header rows.
      group: "@",       // Whether items should be grouped by the values in this column.
      groupHeader: "@"  // Text to display in the group header rows.    },
    link: function (scope, element, attrs, wijGrid) {
      wijGrid.addColumn(scope);
    }
  }
});

require 成员用于指定"wij-grid-column" 指令的父级指令"wij-grid"。link 方法接收父指令的引用 (controller) ，同时通过addColumn 方法传递自身的scope 给父指令。scope 包含了表格用于创建列的所有信息。

更多指令

链接为一些AngularJS 指令的在线实例: http://wijmo.gcpowertools.com.cn/demo/AngularExplorer/ ，你可以在例子的基础上进行练习。例子都是严格的安照本文中的描述制作的，所以你可以无障碍学习他们。

本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。

以上是AngularJS的指令怎麼使用？ angularjs的指令使用詳情（附程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！