如何获取自定义指令的内部html? [英] How to get inner html of custom directive?

问题描述

我想像这样为html创建指令

I want to create a directive for html like this

<div my-modal my-modal-id="test">
    <div class="inner">Hello Inner</div>
</div>

想要从上方生成html之类的

want to generate html from above to something like

<div id="test">
    <h1>My Heading</h1>
    <div class="b">
        Hello Inner
    </div>
</div>

js

.directive('myModal', function() {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            myModalId: '@'            
        },
        compile: function(tEle, tAttrs, transcludeFn) {
            //what to do here?
            //I want to get div.inner of the original html
        },
        template: '<div id="{{myModalId}}">' +
            '<h1>My Heading</h1>' +
            '<div class="b"></div>' +
            '</div>'
    }
});

推荐答案

我不知道您是否可以使用模板，它似乎在调用 compile 之前会覆盖现有的html.抓取HTML并自行替换似乎可行( plnkr ):

I don't know if you can use a template, it seems to overwrite the existing html before compile is called. Grabbing the HTML and replacing it yourself seems to work (plnkr):

.directive('content', function($compile) {
  var dir = {
    restrict: 'E',
    xemplate: '<div id="{{myModalId}}">' +
      '<h1>My Heading</h1>' +
      '<div class="b">Original:<br/><pre>{{original}}</pre></div>' +
      '</div>',
    compile: function(element, attrs, linker) {
      var original = element.html(); // grab original
      element.html(dir.xemplate); // set template html manually
      return function(scope, element, attributes) {
        scope.original = original
      }
    }
  };
  return dir;
});

这篇关于如何获取自定义指令的内部html?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！