Question

DEMO

要在template函数中获取指令的原始HTML，可以执行以下操作：

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

但是，当指令有transclude: true时，此方法不再适用：

angular.module('App', []).directive('myDirective', function() {
  return {
    transclude: true,
    template: function(element) {
      console.log(element.html()); // Outputs empty string
      return '<div>Template</div>';
    }
  };
});

使用翻译时，有没有办法在template函数中获取原始HTML ？

最终目标是向用户展示原始HTML：

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

Answer 1

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

实施例： -

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

并使用capture指令： -

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

<强> Demo

或者只是将内容作为数据（或属性）本身保存在元素上。所以当元素被破坏时，它的属性也会被破坏。

.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

Answer 2

您必须在模板中定义应插入原始HTML代码的位置。

例如：

angular.module('App', []).directive('myDirective', function() {
    return {
          template: '<div>Template</div><ng-transclude></ng-transclude>';
    }
 });

这会在<div>Template</div>

之后放置原始HTML

AngularJS：如何在＆＃34;模板中获取原始指令HTML＆＃34;使用翻译功能？

2 个答案: