Transclude編譯時間

Question

根據角度開發人員指南：

transclude - 編譯元素的內容並使其可用於指令。

內容編譯時可以更改嗎？出於性能方面的原因，我想將內容傳遞給一個指令，我希望使用正確的範圍（父級）進行編譯，但只有在/發生某個事件時纔會這樣。那可能嗎？如果沒有，有沒有辦法以不同的方式做這件事？

Answer 1

萬一別人有同樣的問題，因爲我做的，我已經包括了什麼，我做了簡單化下來的版本。該指令是一個包含transcluded內容的可展開/可摺疊部分。出於性能方面的原因，它只會在需要的時候才編譯轉碼內容，在這種情況下，只有在該部分第一次被擴展時纔會編譯。擴展後，內容成爲DOM的一部分，並且永遠不需要再次編譯/轉譯。這個指令大部分應該是非常基本的和自我解釋的，但是控制器屬性是我以前沒有用過的。

您還會注意到我沒有使用編譯或鏈接屬性。對於這個基本的指令，當指令本身被編譯時，我不需要做任何的DOM操作，所以在控制器中保留所有東西就沒問題。爲了澄清，在指令中運行的命令是編譯，鏈接，然後是控制器中的任何東西。控制器使您可以訪問可在編譯/鏈接功能中使用的所有內容，因此我將所有內容都放在了簡單性，可讀性和可維護性方面。

我希望這可以幫助像我這樣的其他新手。很高興聽到您的意見。

uiComponentsModule.directive('CollapsibleSection', ['$timeout', function($timeout) { 
    return { 
     restrict: 'A', 
     replace: true, 
     transclude: true, 
     scope: { 
      sectionTitle:'@', 
      sectionId:'@', 
      startExpanded:'@' 
     }, 
     template: '<div>' + 
         '<div ng-click="toggle()" class="collapsible-section-header">' + 
          '<span class="collapsible-section-title"</span>' + 
         '</div>' + 
         '<div class="collapsible-section" ng-show="isExpanded">'+ 
          '<div class="transclude-me"></div>'+ 
          '<div class="div-clear"></div>'+ 
         '</div>' +      
        '</div>', 
     controller: ['$scope', '$element', '$attrs', '$transclude', function (scope, element, attrs, $transclude) { 
      scope.isExpanded = false; 
      scope.isLoaded = false; 
      scope.toggle = function(){ 
       if(scope.isExpanded) 
        scope.close(); 
       else 
       { 
        scope.open(); 
       } 
      }; 

      scope.showTransclude = function(){ 
       $transclude(function(clone) { 
        element.find(".transclude-me").append(clone); 
       }); 
      }; 

      scope.open = function(){ 
       scope.isExpanded = true; 
       if(!scope.isLoaded) 
       { 
        scope.showTransclude(); 
        scope.isLoaded = true; 
       } 
      }; 

      scope.close = function(){ 
       scope.isExpanded = false; 
      }; 
     }] 
    } 
} 

Answer 2

我這樣做是爲了確保在事件發生之前，transcluded內容不會插入到DOM中，儘管在實際編譯時我不能100％確定。它看起來是這樣的（用了jQuery）：

app.directive('thumbnail', function() { 
    return { 
    replace: true, 
    transclude: true, 
    template: "<div><a class='clicker'>Click to show.</a>\n" + 
       "<div class='placeholder'></div></div>", 
    controller: function($scope, $transclude, $element) { 
     $element.find('.clicker').once('click', function() { 
     $(this).hide(); 
     var clone = $transclude(); 
     $element.find('.placeholder').append(clone); 
     }); 
    }) 
    }; 
}); 

<div thumbnail> 
    <div expensive-dom-stuff-here></div> 
</div>