AngularJS:如何在“模板"中获取原始指令 HTML使用嵌入时的功能?

解决方案 我能想到的一种方法是使用另一个指令，将内容保存到可通过标识符访问的服务中.所以这意味着您需要添加另一个用于此目的的指令.执行捕获的指令必须比使用它的任何其他指令具有更高的优先级.示例:-.directive('myDirective', function(origContentService) {返回 {优先级:100，转置:真实，模板:'<div>模板</div>',链接:功能(范围，榆树){//获取道具并获取内容console.log(origContentService.getContent(elm.idx));}};}).directive('capture', function(origContentService){返回 {限制:'A'，优先级:200，//并使用 capture 指令与此:- <输入类型=文本">演示或者只是将内容保存为元素上的数据(或属性)本身.这样当元素被销毁时，它的属性也会被销毁..directive('myDirective', function() {返回 {优先级:100，转置:真实，模板:'<div>模板</div>',链接:功能(范围，榆树){console.log(elm.data('origContent'));}};}).directive('捕获', function(){返回 {限制:'A'，优先级:200，编译:函数(榆树){elm.data('origContent', elm.html());}}});演示To get the original HTML of the directive in the template function one could do:HTML:<div my-directive> <input type="text"></div>JS:angular.module('App', []).directive('myDirective', function() { return { template: function(element) { console.log(element.html()); // Outputs <input type="text"> return '<div>Template</div>'; } };});But, when the directive has transclude: true, this method doesn't work anymore:angular.module('App', []).directive('myDirective', function() { return { transclude: true, template: function(element) { console.log(element.html()); // Outputs empty string return '<div>Template</div>'; } };});Is there a way to get the original HTML in the template function when using transclusion?The ultimate goal is to present the original HTML to the user:angular.module('App', []).directive('myDirective', function() { return { transclude: true, template: function(element) { var originalHTML = "How do I get it?"; return '<div>' + ' <pre>' + escapeHtml(originalHTML) + // This is the original HTML ' </pre>' + ' <div ng-transclude></div>' + // and this is how it looks like '</div>'; } };}); 解决方案 One way i could think of is to use another directive which will save the content to a service accessibly by an identifier. So it mean you would need to add another directive which does this purpose. The directive which does the capture must have higher priority that any other directive that uses it.Example:-.directive('myDirective', function(origContentService) { return { priority:100, transclude: true, template: '<div>Template</div>', link:function(scope, elm){ //get prop and get content console.log(origContentService.getContent(elm.idx)); } };}).directive('capture', function(origContentService){ return { restrict:'A', priority:200, //<-- This must be higher compile:function(elm){ //Save id and set prop elm.idx = origContentService.setContent(elm.html()); } }}).service('origContentService', function(){ var contents = {}; var idx = 0; this.getContent= function(idx){ return contents[idx]; } this.setContent = function(content){ contents[++idx] = content; return idx; } this.cleanup = function(){ contents = null; }});and use capture directive along with this:- <div my-directive capture> <input type="text"> </div>DemoOr just save the content as data (or a property) itself on the element. so that when the element gets destroyed so will its property..directive('myDirective', function() { return { priority:100, transclude: true, template: '<div>Template</div>', link:function(scope, elm){ console.log(elm.data('origContent')); } };}).directive('capture', function(){ return { restrict:'A', priority:200, compile:function(elm){ elm.data('origContent', elm.html()); } }});Demo 这篇关于AngularJS:如何在“模板"中获取原始指令 HTML使用嵌入时的功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！