AngularJS와

Question

에 Index.html :

<nav-wrapper title="Email Test"> 
    <nav-elem value="first"></nav-elem> 
    <nav-elem value="second"></nav-elem> 
</nav-wrapper> 

app.js :

app.directive('navWrapper', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      title: "@" 
     }, 
     template: '<div class="wrapper"><p class="title">{{::title}}</p><ul>' 
    } 
}); 


app.directive('navElem', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      value: "@?" 
     }, 
     template: '<li class="navElem">{{::value}}</li>' 
    } 
}); 

출력 :

<div class="wrapper"> 
    <p class="title">Email Test</p> 
    <ul></ul> 
</div> 

원하는 출력 :

<div class="wrapper"> 
    <p class="title">Email Test</p> 
    <ul> 
     <li class="navElem">first</li> 
     <li class="navElem">second</li> 
    </ul> 
</div> 

현재 navElems가 표시되기 전에 지시문 navWrapper의 모든 태그가 닫힙니다. 닫는 'ul div'가 원하는 출력에 도달하기 전에 모든 하위 요소를 포함하여 'navWrapper'에게 알려주는 방법이 있습니까?

Answer 1

nav-wrapper 지시문에 transclude:true을 사용할 수 있습니다.

app.directive('navWrapper', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     scope: { 
      title: "@" 
     }, 
     template: '<div class="wrapper"><p class="title">{{::title}}</p><ul ng-transclude></ul></div>' 
    } 
}); 

확인이 작업 plunker