Угловая директива не заменяет элемент

Question

Я пытаюсь создать директиву, которая будет работать против xml, которую я вставляю в dom через службу.

Вот мой относительно пониженной пример, убрав вызов службы асинхронной для данных, а также шаблон: 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> 

Answer 1

Я думаю, что ответ Адама это лучший маршрут, но в качестве альтернативы и проще, если включить JQuery вы можете сделать это в функции связи:

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

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

В Вашей почтовой директивы. «replace: true» не повлияет ни на что, если вы сами компилируете и управляете DOM.

В то же время я не знаю, для чего предназначена ваша директива компиляции, и почему у вас есть фабрика, которая возвращает строку HTML. Весь этот код выглядит так, что его можно свести к одной директиве. Я не могу прокомментировать то, что вы пытаетесь сделать, но как только вы начнете использовать компиляцию $ повсюду, скорее всего, вы не делаете «Угловой путь».