AngularJS中transclude用法詳解

更新時間：2016年11月03日 11:20:53 作者：joeylin

這篇文章主要介紹了AngularJS中transclude用法,詳細分析了transclude的具體功能、使用技巧與相關(guān)注意事項,需要的朋友可以參考下

本文實例講述了AngularJS中transclude用法。分享給大家供大家參考，具體如下：

Transclude - 在Angular的指令中，大家會看到有一個這樣的一個配置屬性，這個單詞在英文字典里面也查詢不到真實的意思，所以就用英文來標示它吧。如果你深入的使用angular的話，你就花很大一部分時間來創(chuàng)建自定義指令，那么就不可避免的要深入理解transclude。簡單的講，transclude主要完成以下工作，取出自定義指令中的內(nèi)容(就是寫在指令里面的子元素)，以正確的作用域解析它,然后再放回指令模板中標記的位置(通常是ng-transclude標記的地方)，雖然使用內(nèi)建的ngTransclude對于基本的transclude操作已經(jīng)足夠簡單，但是在文檔中對這個transclude的解釋還是有存在很多疑惑，比如說：

在compile函數(shù)中接收到了一個叫transclude的參數(shù)是什么東西呢？有什么用呢？

在控制器中也有個叫$transclude的可以通過依賴注入的服務，這又是什么呢？

隔離作用域跟transclude有什么關(guān)系？

屬性的transclude操作

接下來我們將一個個的解釋:

基本的transclude

我們通過一個基本的transclude例子來講解吧，我們現(xiàn)在要創(chuàng)建的是一個叫buttonBar的指令，用戶可以通過它來添加一組button到頁面上，這個指令會對不同的button進行位置的排列。以下例子css樣式是使用Bootstrap框架。

在fiddle中查看例子：http://jsfiddle.net/ospatil/A969Z/157/

<div ng-controller="parentController">
  <button-bar>
    <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
    <button class="primary">Primary2</button>
  </button-bar>
</div>

JS：

var testapp = angular.module('testapp', []);
testapp.controller('parentController', ['$scope', '$window', function($scope, $window) {
  console.log('parentController scope id = ', $scope.$id);
  $scope.primary1Label = 'Prime1';
  $scope.onPrimary1Click = function() {
    $window.alert('Primary1 clicked');
  };
}]);
testapp.directive('primary', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      element.addClass('btn btn-primary');
    }
  }
});
testapp.directive('buttonBar', function() {
  return {
    restrict: 'EA',
    template: '<div class="span4 well clearfix"><div class="pull-right" ng-transclude></div></div>',
    replace: true,
    transclude: true
  };
});

我們先看下HTML標簽,buttonBar指令包裹著幾個button元素。而button元素也被鏈接上了基于class的primary指令，不要太在意這個primary指令的功能它只不過為button元素添加一些css的樣式而已?，F(xiàn)在我們來看buttonBar指令，它提供了一個transclude:true屬性，同時在它的模板里面使用ng-transclude指令。在運行的過程中，Angular獲取到自定義指令的內(nèi)容，處理完了之后把結(jié)果放到了模板中鏈接上ng-transclude的div。

transclude到多個位置

現(xiàn)在我們來增強下我們的buttonBar指令的功能，我們增加了兩種按鈕，primary和secondary,其中primary按鈕是排右邊，secondary是排左邊。所以要做到這個功能，它必須能夠取出指令的內(nèi)容，然后把它們分別添加到不同的div中，一個用來放primary按鈕, 一個用來放secondary按鈕。

這樣的話，默認的機制已經(jīng)滿足不了我們的要求，于是我們有了另外一種方法：

設置transclude為true

手工移動button元素到合適的div

最后，在指令的編譯或鏈接函數(shù)中移除原始的用來transclude操作的元素

這種方法就是先把所有的內(nèi)容插入到ng-transclude標記的元素中，然后在link函數(shù)中再找出元素的插入的元素，重新放到元素的其他地方，最后刪除原來暫存內(nèi)容的元素。

在fiddle中查看例子：http://jsfiddle.net/ospatil/A969Z/158/

<div ng-controller="parentController">
  <button-bar>
    <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
    <button class="primary">Primary2</button>
    <button class="secondary">Secondary1</button>
  </button-bar>
</div>

JS：

var testapp = angular.module('testapp', []);
testapp.controller('parentController', ['$scope', '$window',function($scope, $window) {
  $scope.primary1Label = 'Prime1';
  $scope.onPrimary1Click = function() {
    $window.alert('Primary 1 clicked');
  }
}]);
testapp.directive('primary', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      element.addClass('btn btn-primary');
    }
  }
});
testapp.directive('secondary', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      element.addClass('btn');
    }
  }
});
testapp.directive('buttonBar', function() {
  return {
    restrict: 'EA',
    template: '<div class="span4 well clearfix"><div class="primary-block pull-right"></div><div class="secondary-block"></div><div class="transcluded" ng-transclude></div></div>',
    replace: true,
    transclude: true,
    link: function(scope, element, attrs) {
      var primaryBlock = element.find('div.primary-block');
      var secondaryBlock = element.find('div.secondary-block');
      var transcludedBlock = element.find('div.transcluded');
      var transcludedButtons = transcludedBlock.children().filter(':button');
      angular.forEach(transcludedButtons, function(elem) {
        if (angular.element(elem).hasClass('primary')) {
          primaryBlock.append(elem);
        } else if (angular.element(elem).hasClass('secondary')) {
          secondaryBlock.append(elem);
        }
      });
      transcludedBlock.remove();
    }
  };
});

雖然這種方法達到了我們的目的，但是允許默認的transclude操作，然后再人工的從DOM元素中移出不是非常有效率的。因此，我們有了compile函數(shù)中的transclude參數(shù)和控制器中的$transclude服務

編譯函數(shù)參數(shù)中的transclude

開發(fā)者指南中給了我們以下的關(guān)于指令中編譯函數(shù)的形式：

function compile(tElement, tAttrs, transclude) { ... }

其中關(guān)于第三個參數(shù)transclude的解釋是:

transclude - A transclude linking function: function(scope, cloneLinkingFn).

好的，現(xiàn)在我們利用這個函數(shù)來實現(xiàn)我們剛才講到的功能，從而不需要再先暫存內(nèi)容，然后再插入到其他地方。

在fiddle中查看例子：http://jsfiddle.net/ospatil/A969Z/161/

<div ng-controller="parentController">
  <button-bar>
    <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
    <button class="primary">Primary2</button>
    <button class="secondary">Secondary1</button>
  </button-bar>
</div>

JS：

var testapp = angular.module('testapp', []);
testapp.controller('parentController', ['$scope', '$window', function($scope, $window) {
  $scope.primary1Label = 'Prime1';
  $scope.onPrimary1Click = function() {
    $window.alert('Primary 1 clicked');
  }
}]);
testapp.directive('primary', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      element.addClass('btn btn-primary');
    }
  }
});
testapp.directive('secondary', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      element.addClass('btn');
    }
  }
});
testapp.directive('buttonBar', function() {
  return {
    restrict: 'EA',
    template: '<div class="span4 well clearfix"><div class="primary-block pull-right"></div><div class="secondary-block"></div></div>',
    replace: true,
    transclude: true,
    compile: function(elem, attrs, transcludeFn) {
      return function (scope, element, attrs) {
        transcludeFn(scope, function(clone) {
          var primaryBlock = elem.find('div.primary-block');
          var secondaryBlock = elem.find('div.secondary-block');
          var transcludedButtons = clone.filter(':button');
          angular.forEach(transcludedButtons, function(e) {
            if (angular.element(e).hasClass('primary')) {
              primaryBlock.append(e);
            } else if (angular.element(e).hasClass('secondary')) {
              secondaryBlock.append(e);
            }
          });
        });
      };
    }
  };
});

注意到，transcludeFn函數(shù)需要一個可用的scope作為第一個參數(shù)，但是編譯函數(shù)中沒有可用的scope，所以這里需要在鏈接函數(shù)中執(zhí)行transcludeFn。這種方法實際上是在link函數(shù)中同時操作編譯后的DOM元素和模板元素(主要是因為transcludeFn函數(shù)中保存著指令的內(nèi)容)。

可在控制器中注入的$transclude服務

在開發(fā)者指南中對$transclude服務是這么解釋的：

$transclude - A transclude linking function pre-bound to the correct transclusion scope: function(cloneLinkingFn).

看看如何用在我們的例子中：

在fiddle中查看例子：http://jsfiddle.net/ospatil/A969Z/162/

<div ng-controller="parentController">
  <button-bar>
    <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
    <button class="primary">Primary2</button>
    <button class="secondary">Secondary1</button>
  </button-bar>
</div>

JS：

var testapp = angular.module('testapp', []);
testapp.controller('parentController', ['$scope', '$window', function($scope, $window) {
  $scope.onPrimary1Click = function() {
    alert('Primary1 clicked');
  };
  $scope.primary1Label = "Prime1"
}]);
testapp.directive('primary', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      element.addClass('btn btn-primary');
    }
  }
});
testapp.directive('secondary', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      element.addClass('btn');
    }
  }
});
testapp.directive('buttonBar', function() {
  return {
    restrict: 'EA',
    template: '<div class="span4 well clearfix"><div class="primary-block pull-right"></div><div class="secondary-block"></div></div>',
    replace: true,
    transclude: true,
    scope: {},
    controller: ['$scope', '$element', '$transclude', function ($scope, $element, $transclude) {
      $transclude(function(clone) {
        var primaryBlock = $element.find('div.primary-block');
        var secondaryBlock = $element.find('div.secondary-block');
        var transcludedButtons = clone.filter(':button');
        angular.forEach(transcludedButtons, function(e) {
          if (angular.element(e).hasClass('primary')) {
            primaryBlock.append(e);
          } else if (angular.element(e).hasClass('secondary')) {
            secondaryBlock.append(e);
          }
        });
      });
    }],
  };
});

同樣的意思，$transclude中接收的函數(shù)里的參數(shù)含有指令元素的內(nèi)容，而$element包含編譯后的DOM元素，所以就可以在控制器中同時操作DOM元素和指令內(nèi)容，跟上文的compile函數(shù)的實現(xiàn)方式有異曲同工之處，這里有幾點需要注意，這個控制器應該是指令的控制器，另一個注意到上文除了第一種方法，其他的地方都沒有用到ng-transclude，因為無需插入到模板中。

Transclude 和 scope

在開發(fā)者指南中提到了a directive isolated scope and transclude scope are siblings,這到底是什么意思呢？假如你認真看前文的例子的話，你就會發(fā)現(xiàn)parentController控制器創(chuàng)建了一個作用域，buttonBar指令在parentController下面創(chuàng)建了一個孤立作用域，而根據(jù)Angular文檔，transclude也創(chuàng)建了另外一個作用域，因此指令的隔離作用域跟transclude作用域是基于同一個父作用域的兄弟作用域。

transclude內(nèi)容放入元素的屬性

實際上，你不可以這么做，但是你可以通過一種變通的方法來實現(xiàn)這種效果

var testapp = angular.module('testapp', [])
testapp.directive('tag', function() {
 return {
  restrict: 'E',
  template: '<h1><a href="{{transcluded_content}}">{{transcluded_content}}</a></h1>',
  replace: true,
  transclude: true,
  compile: function compile(tElement, tAttrs, transclude) {
    return {
      pre: function(scope) {
        transclude(scope, function(clone) {
         scope.transcluded_content = clone[0].textContent;
        });
      }
    }
  }
 }
});

這里沒有操作DOM元素，只是把元素的文本內(nèi)容復制給了作用域?qū)傩?，然后在通過作用域傳給屬性。

另外要注意的是，這里的clone參數(shù)是jquery或angular.element封裝的整個模板元素。