Angularjs 如何获得指令'；使用模板时，原始内容是什么？

给定一个带有模板的指令，如何获取其原始内容

例如：

HTML:

JS:

angular.module（'App'，[]）.directive（'myDirective'，function（）{
返回{
模板：“模板”，
编译：函数（元素）{
console.log（element.html（））；//输出模板
//我该怎么去？
}
};
});

---

您可以使用ng transclude。您将获得附加到指令模板内容的原始内容。

检查此项（但必须将transclude设置为true）

angular.module（'App'，[]）.directive（'myDirective'，function（）{
返回{
模板：“模板”，
是的，
链接：函数（范围、元素、属性、ctrl、transclude）{
转移（范围、功能（克隆）{
var html=''；
对于（var i=0；i，因为您只需要用于显示目的，而不是真正将其用于绑定和其他内容，并且在angular接触它之前就需要它。您可以使用指令的
模板
属性的函数表达式语法

例如：-

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

'
},
链接：功能（范围、元素）{
var idx=element.idx；//从元素获取idx属性值
scope.orig=content[idx]；//获取内容
删除内容[idx]；//删除密钥
如果（！Object.keys（content））{idx=0；}//加载所有项后重置idx
}
};
});

---

您到底想做什么？获取输入的值并放入div？我想打印出指令的原始内容。实际示例比这更复杂，所以我尝试给出一个最小的示例。但最终您希望它们被替换，对吗？在您的实际案例中，它是否具有正确性所有的东西？你想对这些内容做些什么吗？你的意思是这样吗？@PSL在真实的例子中，我需要原始的HTML来向用户展示它（尽管需要转义）。在你的jsbin中，输出包含

class=“ng scope”

由Angular自动添加。我需要原始HTML，不包含所有Angular内容。输出为

，而我需要

。谢谢！在使用模板转换时，有没有办法获取原始HTML？请参阅

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

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

    }
  };
});

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

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