角指令不更換元

我試圖創建一個指示，將工作對我很注入到通過服務的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

角指令不更換元

回答

相關問題