Question

我正在尝试创建一个针对xml的指令，我将通过服务注入到dom中。

这是一个相对简化的示例，删除了对数据的异步服务调用以及模板：jsBin - transforming elements using directive

关于将我的post元素的header属性放入h2标记，但是它会在我的页面中留下一个元素，这对于某些浏览器来说会失败。

澄清一下，这就是我得到的：

    <post class="ng-isolate-scope ng-scope" heading="test heading">
      <div class="ng-scope">
        <h2 class="ng-binding">test heading</h2>
        <div>test</div>
      </div>
    </post>

这就是我所期望的：

    <div class="ng-scope">
      <h2 class="ng-binding">test heading</h2>
      <div>test</div>
    </div>

Answer 1

您未在指令中正确使用模板。您的链接功能不应像您在示例代码中那样应用模板。

    var linker = function(scope, element, attrs) {

        var template = getTemplate();

        element.html(template);

        $compile(element.contents())(scope);
    };

而不是那样，只需这样做：

    return {
        restrict: 'E',
        replace: true,
        scope: {
            heading: '@'
        },
        template: '<div><h2>{{heading}}</h2><div>test</div></div>'
    };

在你的帖子指令中。如果您自己编译和操作DOM，'replace：true'不会影响任何内容。

但与此同时，我不知道您的编译指令是什么以及为什么您有一个返回HTML字符串的工厂。所有代码看起来都可以简化为单个指令。我无法评论你想要做什么，但是一旦你开始在整个地方开始使用$ compile，你可能没有采用'Angular方式'做事。

Answer 2

我认为Adam的回答是更好的路径，但是如果你包含jquery，你可以在你的链接函数中做到这一点：

 var e =$compile(template)(scope);
 element.replaceWith(e);

Angular Directive不替换Element

2 个答案: