手動複製HTML內容的指令

我正嘗試創建一個自定義指令，該指令將用模板替換自身，並將text()複製到替換後的版本中。手動複製HTML內容的指令

爲什麼不使用ng-transclude？好吧，這是一個矯枉過正的情況，因爲指令中沒有HTML，只是我想複製的文本。它還創建了另一個HTML元素，這有點浪費。

問題是，如果有一個模板，Angular會將該模板作爲$element傳遞，並且我不知道如何訪問原始內容。綁定不會工作，因爲該值不在屬性中，而是在元素的內容中。

指令：

angular.module('ui', []) 
.directive('foo', 
    function() { 
     return { 
     restrict: 'E', 
      replace: true, 
      template: '<p>Insert here</p>', 
      compile: function(element, attrs) { 
       console.log('compile time text: ' + element.text()); 
       return function($scope, element, attrs) { 
        console.log('link time text: ' + element.text()); 
       }; 
      } 
     } 
    });

用法：

<div ng-app="ui"> 
    <foo>This should be copied</foo> 
</div>

小提琴：http://jsfiddle.net/uefnx/1/

來源

2013-09-05 georgiosd

您可以訪問的innerHTML包裹由指令這樣

var text = element.$$element.context.innerHTML;

來源

2013-09-05 13:42:38 zsong

手動複製HTML內容的指令

回答

相關問題