如何在使用模板時獲取指令的原始內容？

Question

DEMO

考慮到與模板的指令，我怎麼能得到它的原始內容？

例如：

HTML：

<div my-directive> 
    <input type="text"> 
</div> 

JS：

angular.module('App', []).directive('myDirective', function() { 
    return { 
    template: '<div>Template</div>', 
    compile: function(element) { 
     console.log(element.html()); // Outputs <div>Template</div> 
     // How do I get <input type="text"> ? 
    } 
    }; 
}); 

PLAYGROUND HERE

Answer 1

因爲你只需要它顯示的目的，而不是真正與綁定和其他東西使用它，在你面前的角度需要它已經觸及它。您可以使用指令的template屬性的函數表達式語法。

實施例： -

var content; 
    template: function(elm){ 
     content = elm.html(); //save the html 
     return '<div>Template</div>'; 
    }, 

用於支撐多個擴展示例： -

.directive('myDirective', function($timeout) { 
    var content={}; 
    var loadedDirs; 
    return { 
    scope:true, 
    template: function(elm){ 
     loadedDirs = loadedDirs || 
        angular.element(document.querySelectorAll('[my-directive]')); 
     //Save the element in its respective index  
     content[loadedDirs.index(elm)] = elm.html(); 

     return '<div>Template<div><pre>{{orig}}</pre></div></div>' 
    }, 
    link: function(scope, element) { 
     var idx = loadedDirs.index(element); 
     scope.orig = content[idx]; 

     //Remove key 
     delete content[idx]; 
     //Remove reference to loadedDirs 
     if(!Object.keys(content)){ 
     loadedDirs = null; 
     } 
     } 
    }; 
}); 

Demo

否Jquery的溶液（工作周圍index）

.directive('myDirective', function($timeout) { 
    var content={}, 
     idx = 0; 

    return { 
    scope:true, 
    template: function(elm){ 
     elm.idx = idx; //set an iterative index 
     //Save the element in its respective index  
     content[idx++] = elm.html(); //save element html in a map 

     return '<div>Template<div><pre>{{orig}}</pre></div></div>' 
    }, 
    link: function(scope, element) { 
     var idx = element.idx; //Get idx property value from the element 
     scope.orig = content[idx]; //get the content 
     delete content[idx]; //remove the key 
     if(!Object.keys(content)){ idx = 0; } //reset idx once all are loaded 
    } 
    }; 
}); 

Demo

Answer 2

可以使用NG-transclude，docs here。您將獲得附加到指令模板內容的原始內容。

Answer 3

檢查這個（你必須設置transclude爲true，雖然）

angular.module('App', []).directive('myDirective', function() { 
    return { 
    template: '<div>template</div>', 
    transclude: true, 
    link: function(scope, element, attr, ctrl, transclude) { 
     transclude(scope, function(clone){ 
     var html = ''; 
     for(var i = 0; i<clone.length;i++){ 
      html += clone[i].outerHTML || ''; 
     } 
     console.log(html); 
     }) 

    } 
    }; 
});