지시어의 다른 부분에 대한 각도 템플릿을 처리하는 가장 좋은 방법

Question

지시어 안에 중첩 된 템플릿을 사용하는 방법에는 여러 가지가 있지만 그 중 큰 것은 효과가 없습니다. 적어도 나는 다양한 문제를 해결할 수 없었습니다.

생각은 무엇입니까? 헤더, 바닥 글, 메뉴, 작업 표시 줄, 내용, 선택기 등 다양한 논리 부분으로 구성된 재사용 가능한 지시문을 만들어야합니다. 내가 필요하면 전체 템플릿을 지정하는 기능이 바로이 같은 HTML 레이아웃 내부에 다른 부분에 대한 템플릿을 가지고하는 것입니다 것처럼 대상 HTML 레이아웃이 생성됩니다 이러한 정의를 바탕으로

<videoBoard> 
    <header-template>{{heading}}</header-template> 
    <menu-template><a ng-click="showVideo()"/></menu-template> 
    <content> 
     <a ng-href="{{item.link}}" ng-repeat="items">{{item.caption}}</a> 
    </content> 
<videoBoard> 

I 직접 지시문에 명시했습니다. 범위 변수에 의해 전달 된 HTML 요소를 사용하여 코드를 통해 지정할 수 있어야합니다.

이런 식으로. 여기에 일부 템플릿을 지정하지 않으면 기본 템플릿 (별도로 정의되거나 전체 템플릿의 표시된 부분에 정의 됨)을 사용합니다. 범위와 같은 모든 것들이 변경 사항을 추적해야합니다.

이렇게 최선을 다하는 방법?

Answer 1

귀하의 질문은 너무 단일 질문에 대한 광범위한 생각합니다. 당신이 동적 템플릿에 대한 별도의 질문을 할 경우, 우리가 여전히 템플릿을 사용할 수 있습니다 대신 link의 transclude 및 compile를 사용하여 제품을 대체하는 한 가지 방법 ... (fiddle)

<script type="text/ng-template" id="test.html"> 
    <h1>Template H1 for {{name}}</h1> 
    This should replace everything, but the &lt;h1&gt; 
    element can be overridden 
</script>  

<div class="boxed"> 
    <parent> 
     <h1>Hello, {{name}}</h1> 
     This should say only the person's name 
    </parent> 
</div> 

<div class="boxed"> 
    <parent> 
     This should say whatever the default is 
    </parent> 
</div> 

입니다 원래 요소에 액세스 할 수 있습니다. compile 함수는 지시문에 의해 반환 된 일반 link 함수와 같은 함수를 반환합니다. 호출 할 수있는 함수 인 인수로 원래 요소 (여기서는 clone)에 대한 액세스 권한을 제공하는 인수로 linker이 필요합니다.

transclude: true, 
    templateUrl: 'test.html', 
    compile: function(element, attrs, linker) { 
     // need to return linking function 
     var parent = element.parent(); 
     return function($scope, $element, $attrs) { 
      linker($scope, function(clone) { 
       // 'clone' is a copy of the original elements in our 'parent' element 
       var existing = $element.find('h1'); // in template 
       if (existing.length == 1) { 
        // look for replacement h1 element specified in code 
        for (var i = 0; i < clone.length; i++) { 
         if (clone[i].tagName == "H1") { 
          // replace h1 element in template with specified 
          $element[0].replaceChild(clone[i], existing[0]); 
          break; 
         } 
        } 
       } 
      }); 
     } 

이 템플릿을 사용하여 완전히 parent 태그 사이에 무엇이든 대체하지만 원본 콘텐츠는 clone 인수를 사용하여 액세스 할 수 있습니다. 여기서 원본의 경우 h1 요소를 사용하고이 요소를 사용하여 템플릿의 h1 요소를 대체합니다. 문법은 약간 웃긴다. 나는 단지 clone.find('h1')을 할 수 있기를 바랐다. 그러나 복제본은 JQLite 객체의 배열로 보인다.