如何在使用模板时获取指令的原始内容？

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); 
     }) 

    } 
    }; 
});