HTML을 각도 지시어에 전달하려면 어떻게 해야 합니까?

HTML을 각도 지시어에 전달하려면 어떻게 해야 합니까?

템플릿으로 각도 지시문을 작성하려고 하는데 div 안의 HTML도 잃고 싶지 않습니다.예를 들어 HTML로부터의 지시사항을 다음과 같이 호출합니다.

<div my-dir>
  <div class="contents-i-want-to-keep"></div>
</div>

그리고 제 지시가 있습니다.

app.directive('myDir', [ '$compile', function($compile) {
return {
    restrict: 'E',
    link: function(scope, iElement, iAttrs){
        // assigning things from iAttrs to scope goes here
    },
    scope: '@',
    replace: false,
    templateUrl: 'myDir.html'
};
}]);

다음으로 myDir.html이 있습니다.여기서 새로운 요소를 정의합니다.

<div class="example" style="background: blue; height: 30px; width: 30px"></div>

replace를 false로 설정해도 내부 contents-i-want-to-keep div가 손실됩니다.각도 문서에 대한 이해는 템플릿 뒤에 추가됩니다.(아마도 링크 기능을 통해) 결과를 유지할 수 있는 방법이 있습니까?

<div class="example" style="background: blue; height: 30px; width: 30px">
     <div class="contents-i-want-to-keep"></div>
</div>

감사합니다!

를 사용해야 합니다.transclude: true명령어 옵션에서 추가ng-transclude템플릿에 추가:

<div class="example" style="…" ng-transclude></div>`

이 plunkr에는 원래 dom 요소를 유지하기 위해 템플릿에서 ng-transclude를 사용하는 방법의 예가 있습니다.

http://plnkr.co/edit/efyAiTmcKjnhRZMTlNGf

언급URL : https://stackoverflow.com/questions/16697721/how-to-pass-html-to-angular-directive