AngularJS:如何在“模板"中获取原始指令 HTML使用嵌入时的功能? [英] AngularJS: How to get the original directive HTML in the "template" function when using transclusion?

问题描述

演示

要在 template 函数中获取指令的原始 HTML，可以这样做:

HTML:

<输入类型=文本">

JS:

angular.module('App', []).directive('myDirective', function() {返回 {模板:函数(元素){console.log(element.html());//输出 返回'
模板
';}};});

但是，当指令具有 transclude: true 时，此方法不再起作用:

angular.module('App', []).directive('myDirective', function() {返回 {转置:真实，模板:函数(元素){console.log(element.html());//输出空字符串返回'
模板
';}};});

在使用嵌入时，有没有办法在template函数中获得原始HTML?

最终目标是将原始 HTML 呈现给用户:

angular.module('App', []).directive('myDirective', function() {返回 {转置:真实，模板:函数(元素){var originalHTML = "我如何得到它?";返回 '​​
'+' <预>'+escapeHtml(originalHTML) +//这是原来的 HTML' </pre>'+' <div ng-transclude></div>'+//这就是它的样子'</div>';}};});

这里的游乐场

解决方案

我能想到的一种方法是使用另一个指令，将内容保存到可通过标识符访问的服务中.所以这意味着您需要添加另一个用于此目的的指令.执行捕获的指令必须比使用它的任何其他指令具有更高的优先级.

示例:-

.directive('myDirective', function(origContentService) {返回 {优先级:100，转置:真实，模板:'<div>模板</div>',链接:功能(范围，榆树){//获取道具并获取内容console.log(origContentService.getContent(elm.idx));}};}).directive('capture', function(origContentService){返回 {限制:'A'，优先级:200，//<-- 这必须更高编译:函数(榆树){//保存id并设置propelm.idx = origContentService.setContent(elm.html());}}}).service('origContentService', function(){var 内容 = {};无功 idx = 0;this.getContent= 函数(idx){返回内容[idx];}this.setContent = 函数(内容){内容[++idx] = 内容；返回idx；}this.cleanup = 函数(){内容 = 空；}});

并使用 capture 指令与此:-

 
<输入类型=文本">

演示

或者只是将内容保存为元素上的数据(或属性)本身.这样当元素被销毁时，它的属性也会被销毁.

.directive('myDirective', function() {返回 {优先级:100，转置:真实，模板:'<div>模板</div>',链接:功能(范围，榆树){console.log(elm.data('origContent'));}};}).directive('捕获', function(){返回 {限制:'A'，优先级:200，编译:函数(榆树){elm.data('origContent', elm.html());}}});

演示

DEMO

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

PLAYGROUND HERE

解决方案

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>

Demo

Or 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使用嵌入时的功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！