角指令不更换元

我试图创建一个指示，将工作对我很注入到通过服务的DOM XML。角指令不更换元

这是我的一个相对减少例子，在去除异步服务调用的数据，也是模板：jsBin - transforming elements using directive

一切就工作得很好让我交的元素的头属性为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>

来源

2013-10-15 Tom Haywood

哪些因素有关呢？或者你是否担心，例如'ng-binding'属性？ – KayakDave

编辑我的职务，这样希望，这是一个有点清晰 –

我认为亚当的回答是更好的途径，但或者，更容易，如果你包括jQuery的，你可以在你的链接功能做到这一点：

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

来源

2013-10-15 19:41:46 lucuma

这正是我正在寻找，但没有人知道如何做到这一点没有jQuery的依赖？ –

你必须重写replaceWith。 http://stackoverflow.com/questions/10165262/best-way-to-write-jquerys-replacewith-in-natural-javascript – lucuma

可能'element.parent（）的replaceChild（即，元素）'或类似的东西？ –

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

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字符串。所有这些代码看起来都可以简化为单个指令。我真的不能在你想要做什么评论，但一旦你开始使用$编译所有的地方，可能你没有做的事情“角的方式”。

来源

2013-10-15 19:34:04 Adam

感谢您的结构良好的答案亚当，叶约已经有所减少的例子遗憾。我的服务实际上做的异步调用的数据，并从我的连接功能中我动态加载的模板，所以$编译的是getTemplate调用（我相信我需要编译件成功的发生是由于该服务调用件模板和dom注射） –

在这种情况下，您仍然应该使用我的答案。无论您的代码中的哪个组件进行异步调用，都应该返回一个承诺，该承诺可以直接绑定到您的模板中。它会自动在Angular的视图上为您解决。在链接函数中使用$ compile服务是没有必要的。 – Adam

角指令不更换元

回答

相关问题