지시문 내부의 템플릿

Question

나는 내 지시문에 템플릿 내부에 템플릿을 넣어야하는 이상한 상황이 있습니다. 그 이유는 AngularJS가 속성 내부에서 ng-repeat 코드를 읽지 않기 때문입니다.

<div ng-repeat="phone in phones"> 
    <button popover="<div ng-repeat='friend in phone.friends'>{{friend.name}}</div>"></button> 
</div> 

불행하게도이 때문에 팝 오버 속성 주위에 따옴표 작동하지 않습니다 이상적인 세계에서는

이 내 코드의 모습 것입니다.

http://plnkr.co/edit/ZA1uA1UOlU3cCH2mbE0X?p=preview

HTML :

<div my-popover></div> 

자바 스크립트 :

이 내가이 plunker에 같은 템플릿 안에 템플릿을 넣어려고 꽤 깊은 토끼 구멍 아래로 나를 이끌었다

angularApp.directive('myPopover', function($compile) { 
    var getTemplate = function() 
    { 
     var scope = {title: "other title"}; 
     var template = "<div> test template. title: {{title}}</div> "; 
     return $compile(template)(scope); 
    } 
    return { 
     restrict: 'A', 
     template: '<button class="btn btn-default" popover="{{content}}" popover-title="title">template</button>', 
     link: function(scope) { 
      scope.content = getTemplate(); 
     } 
    }; 
}) 

AngularJs가 순환 참조에 대해 불평하므로 불행히도이 기능이 작동하지 않습니다. 도와주세요! (이것은 하루 종일 걸렸습니다.)

Answer 1

나는 당신이 달성하려고하는 것을 정확히 이해하고 있지는 않지만, 모양에서 모양을 찾으십시오. 지시어에 대해 transclude 옵션을 확인하십시오. docs에서

:

사용 transclude : 당신이 임의의 내용을 래핑하는 지침을 만들 때 사실.

transclude를 사용하는 경우 버튼 내에 popover 콘텐츠를 저장하고 ng-transclude 지시문을 사용하여 콘텐츠를 원하는 위치로 전달할 수 있습니다.

코드는 다음과 같이 보일 것입니다 :

<button> 
    <div ng-repeat='friend in phone.friends'>{{friend.name}}</div> 
</button> 

당신은 the guide to directives에 행동 몇 가지 예를 볼 수 있습니다.