0

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

这是我的一个相对简化的示例，删除了对数据的异步服务调用以及模板：jsBin - 使用指令转换元素

将我的 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>
4

2 回答 2

2

我认为亚当的答案是更好的路线，但如果您包含 jquery，您可以在链接函数中执行此操作，或者更容易：

 var e =$compile(template)(scope);
 element.replaceWith(e);
于 2013-10-15T19:41:46.307 回答
2

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

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

在您的 post 指令中。如果你自己编译和操作 DOM，'replace: true' 不会影响任何东西。

但与此同时，我不知道您的编译指令是做什么用的，也不知道为什么您有一个返回 HTML 字符串的工厂。所有这些代码看起来都可以简化为单个指令。我无法真正评论您要做什么，但是一旦您开始到处使用 $compile ，您很可能不会以“Angular 方式”做事。

于 2013-10-15T19:34:04.743 回答