격리 된 범위를 사용할 때 각도 지시문 템플릿 변환

Question

사용자 지정 지시문을 작성하여 드롭 다운 요소를 생성합니다. 격리 된 범위를 사용하면 컴파일 함수는 템플릿을 변환하지 않습니다.

주로 지시문에서 제공되는 select 요소의 ng-options를 변경하고 있습니다. 격리 된 범위에서 어떻게 동일한 결과를 얻을 수 있습니까?

myApp.directive('helloWorld', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     id:'@', 
     label:'@' 
    }, 
    template: '<div class="control-group">' + 
       ' <label for="{{id}}" class="control-label">{{label}}</label>' + 
       ' <div class="controls">' + 
       '  <select id="{{id}}" class="medium m-wrap">' + 
       '  </select>' + 
       ' </div>' + 
       '</div>', 
    }, 
    compile:function(tElement, tAttrs, transclude){ 
    var opts = tAttrs.textField 
    ?'item.' + tAttrs.textField + (tAttrs.groupBy ? ' group by item.' + tAttrs.groupBy : '') + ' for item in ' + tAttrs.itemSource 
    :'item for item in ' + tAttrs.itemSource; 

    tElement.find('select').attr('ng-options',opts); 
    } 
}); 

Answer 1

문제는 {{label}}가 분리 된 범위에 존재하지 않는다는 것입니다. 당신은 당신의 지시어 내부의 격리 된 범위에 부모 범위에 대한 참조를 전달하여이 문제를 해결 할 수 있습니다

return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     id:'@', 
       label:'@' 
    }, 
     // in the directive! 
     controller : function($scope){ 
      $scope.label = $scope.$parent.label; 
     } 

그러나이는 것이 좋습니다 패러다임이 아니다. 지시어가들을 수있는 유일한 데이터는 'named'입니다. 따라서 속성을 사용하는 것이 더 좋습니다 (사용자가 수행하는 것처럼 보입니다). 그래서 ...

// in the directive! 
controller : function($scope, $attrs){ 
    $scope.$parent.$watch($attrs.itemSource, function(itemSource){ 
     $scope.itemSource = itemSource; 
    }); 
} 

그 라인을 따라 뭔가.