각도 지시어가 대체되지 않음

Question

서비스를 통해 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> 

Answer 1

나는 다른 방법으로 쉽게 아담의 대답은 더 나은 경로 생각하지만? 아니면 예를 들어`ng-binding` 속성에 대해 걱정하고 있습니까?

Answer 2

. 링크 기능은 예제 코드에서와 같이 템플릿을 적용해서는 안됩니다. 게시물 지시어에서

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

대신 그

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

     var template = getTemplate(); 

     element.html(template); 

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

, 그냥 이렇게. 'replace : true'는 DOM을 직접 컴파일하고 조작하는 경우 아무런 영향을주지 않습니다.

동시에, 컴파일 지시문이 무엇인지, 그리고 HTML 문자열을 반환하는 팩토리가있는 이유는 모르겠다. 모든 코드는 단일 지시문으로 축소 될 수있는 것처럼 보입니다. 내가하는 일에 대해 정말로 언급 할 수는 없지만 일단 모든 곳에서 $ 컴파일을 시작하면 '각도 방식'으로 일하지 않을 가능성이 있습니다.

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