각도 지시문에서 동적 템플릿을 사용할 수 없습니다.

Question

3 가지 모드가있는 작은 각형 응용 프로그램을 작성하려고합니다. 품질 보증, 생산 및 샌드 박스. QA는 여러 개의 단추가있어서 사용자가 원하는 값을 선택하고 "myModel"을 채울 수 있습니다. 다른 두 가지 모드 인 Production 및 sandbox에는 이전에 선택한 Qa 값 (myModel에서 sync 함수를 사용하여)을 적용하기위한 버튼이 있습니다.

QA (여러 개의 버튼) 및 Production, Sandbox (QA- 모델에서 동기화 할 단일 버튼)에 대해 다른 템플릿을 사용하고 있습니다. QA/제작 템플릿을 훌륭하게 렌더링 할 수 있지만 QA 템플릿 (listof 버튼) 전혀 나타나지 않습니다.

버튼 목록에 대해 컴파일하는 방식이 잘못되었다고 생각합니다. 에 내 코드를 참조하십시오

: http://jsbin.com/sutipo/1/watch?html,js,output

HTML 나는 동적으로 픽업 템플릿에 사용하고 & 지침은 다음과 같습니다 :

<tr> 
     <td> <strong>Production : </strong> </td> 
     <td> {{types.production.text}} </td> 
     <td><app-typedisplay env="production" status="non-base"></app-typedisplay></td> 
    </tr> 
    <tr> 
     <td> <strong>SandBox : </strong> </td> 
     <td> {{types.sandbox.text}} </td> 
     <td><app-typedisplay env="sandbox" status="non-base"></app-typedisplay></td> 
    </tr> 
    <tr> 
     <td><strong>QA : </strong> 
     <td> {{types.qa.text}} </td> 
     <td><app-typedisplay env="qa" status="base"></app-typedisplay></td> 
    </tr> 

그리고 지침 :

app.directive('appTypedisplay', function ($compile) { 

    var getTemplate = function (content) { 
     var template = ''; 
     var base = "<button type='button' class='btn btn-default' " + 
      "ng-class='{active: option.text == model.text}'" + 
      "ng-repeat='option in options' " + 
      "ng-click='activate(option)'>{{option.text}} " + 
      "</button>"; 

     var non_base = "<td> <button " + 
      'ng-click=\'sync("' + content.env + '")\'>' + 
      "Sync to " + content.env + "</button> </td>"; 

     switch (content.status) { 
      case 'base': 
       template = base; 
       break; 
      case 'non-base': 
       template = non_base; 
       break; 
     } 

     return template; 
    }; 

    var linker = function (scope, element, attrs) { 
     element.html(getTemplate(attrs)); 
     $compile(element.contents())(scope); 
    }; 

    return { 
     restrict: 'E', 
     scope: { 
      model: '=', 
      options: '=', 
      env: '=' 
     }, 
     controller: function ($scope) { 
      $scope.activate = function (option) { 
       $scope.model = option; 
      }; 
     }, 
     link: linker 
    }; 
}); 

여기에 각별한 초보자가 있습니다. 왜 버튼 템플릿의 목록이 제대로 컴파일되지 않는지 이해하는 데 도움이됩니까?

출력이 아래에 뭔가를 같이한다 예상 :

Answer 1

당신은 당신의 지시어의 분리 범위로 전달하는 일부 속성을 정의하지만, 실제 모델 참조 전달되지 않을 :

<app-typedisplay env="qa" status="base" options="options" model="myModel"></app-typedisplay> 

독립적 표시를 scope 지시문은 부모 범위에 대해 아무 것도 모르기 때문에 사용 된 모든 데이터는 특성을 통해 명시 적으로 전달되어야합니다.