AngularJS 지시문 템플릿이 컴파일되지 않습니다.

Question

각도 다중 선택 사용자 지정 지시문을 만드는 중입니다. 선택 목록과 함께 확인란이있는 모달입니다. 격리 된 범위를 사용합니다. 그러나 지시문 템플릿은 이와 같이 추가되고 각도 표현은 해석되지 않습니다. 많은 연구와 사고가 있은 후에도이 작업이 매우 기본적인 작업이므로 잘못된 작업을 수행하고 있는지 알지 못합니다.

는

(jFiddle는 여기 http://jsfiddle.net/webaba/ev52F)

app.directive('pickFromList', function(){ 
    return { 
    restrict: 'EA', 
    scope:{   
     model: '=ngModel', 
     options: '=ngOptions', 
     title: '@', 
     label: '@', 
     idField: '@idField', 
    }, 
    replace:true, 
    template: '<div ng-init="open=false"><button class="btn btn-info" ng-click="open=true">Test</button>'+ 
      '<div class="modal" ng-show="open">'+ 
       '<div class="modal-header">'+ 
        '<button type="button" class="close" ng-click="open=false">✕</button>'+ 
        '<h3>{{ title }}</h3>'+ 
       '</div>'+ 
       '<div class="modal-body" style="text-align:center;">'+ 
        '<div ng-repeat="option in options" style="text-align:\'left\'">'+ 
         '<ul class="unstyled">'+ 
          '<li class=""><input ng-click="toggleItem(option[idField])" ng-checked="itemSelected(option[idField])" type="checkbox"></input> {{ option[label] }}</li>'+ 
         '</ul>'+ 
        '</div>'+ 
       '</div><!-- end modal body-->'+ 
       '<div class="modal-footer">'+ 
        '<div class="controls">'+ 
         '<button class="btn btn-success" type="submit" ng-click="open=false">Ok</button>'+ 
        '</div>'+ 
       '</div>'+ 
      '</div>'+ 
     '</div>', 
    link: function(scope, element, attr){ 
     scope.open = false; 
    }, 
     controller: function($scope){ 

      $scope.selectAll = function() { 
       $scope.model = _.pluck($scope.options, $scope.idField); 
       console.log($scope.model); 
      };    
      $scope.deselectAll = function() { 
       $scope.model=[]; 
       console.log($scope.model); 
      }; 
      $scope.toggleItem = function(id){ 
       if (_.contains($scope.model, id)) { 
        $scope.model = _.without($scope.model, id); 
      } else { 
        $scope.model.push(id); 
       } 
       console.log($scope.model); 
       return false; 
      }; 
      $scope.itemSelected = function (id) {     
       if (_.contains($scope.model, id)) { 
        true;//return 'icon-ok';// pull-right'; 
       } 
       return false; 
      };         
     } 
    } 
}); 

가 작동하지 않는 이유는 어떤 생각?

Answer 1

여기에 ngOptions 지시어 (ng-options="choices")는 선택 컨트롤에 사용되는 지침이므로 사용하지 마십시오.

참조 : http://jsfiddle.net/ev52F/10/