AngularJS 지시문 템플릿에 HTML이 표시되지 않습니다.

Question

나는 http://jsfiddle.net/skwidgets/w2X9m/3/에 바이올린을 사용하여 확인란 그룹을 만듭니다. 프로토 타입에서 원하는대로 작동하며 하나 이상의 그룹을 포함 할 수 있으며 독립적으로 실행할 수 있습니다. 만족 스러우면서 필자는 내가 만들고있는 응용 프로그램에 코드를 추가하고 템플릿의 html : 지시문의 '<'이 나타나지 않습니다. 템플릿의 핸들 막대에있는 모델 데이터는 항상 수행됩니다. 나는 왜 오류가 없는지 알아 내기 위해 솔기를 짤 수가 없다.

나는 또한 내가 연결되어있는 피들러에서 프로토 타입의 코드를했다 http://plnkr.co/edit/JE5dRDU4VyGd0UAbCtNu?p=preview

<div class="sqs" > 
     <pre> 
      {{survey | json}} 
     </pre> 

     <suvey-checkbox ng-model="Q1" ng-init="surveyQuestions = [ 
       { 'value':'value1', 'name': 'The unit' }, 
       { 'value': 'value2', 'name': 'Patient Threw Up'}, 
       { 'value':'value3', 'name': 'Unsafe for children' }, 
       { 'value':'value4', 'name': 'Actively dying, reached life goal'}]"> 
     </suvey-checkbox> 

     <suvey-checkbox ng-model="Q2" ng-init="surveyQuestions = [ 
       { 'value':'value1', 'name': 'The unit' }, 
       { 'value': 'value2', 'name': 'Patient Threw Up'}, 
       { 'value':'value3', 'name': 'Unsafe for children' }, 
       { 'value':'value4', 'name': 'Actively dying, reached life goal'}]"> 
     </suvey-checkbox> 
</div> 

그리고

var app = angular.module("app", []); 
app.run(function($rootScope){ 
$rootScope.survey = []; 
}); 

app.directive('suveyCheckbox', function ($rootScope) { 
return { 
    restrict: 'E', 
    require: '^ngModel', 
    scope: { 
     ngModel: '@' 
    }, 
    template: '{{ngModel}}<br /><label ng-repeat="surveyQuestion in  surveyQuestions" class="checkbox">' + 
       '<input data-role="none" type="checkbox" name="selectedExclusion[]" value="{{surveyQuestion.value}}"' + 
       'ng-checked="surveyAnswers.indexOf(surveyQuestion.value) > -1" ng-click="togglesurveyAnswers(surveyQuestion.value)"> ' + 
       '{{surveyQuestion.name}} <br /></label>{{surveyAnswers}}', 
    link: function (scope, elem, attr) { 
     // selected exclusion 
     scope.surveyAnswers = []; 

     // toggle surveyAnswers for a given answer by name 
     scope.togglesurveyAnswers = function togglesurveyAnswers(surveyQuestion) { 
      var idx = scope.surveyAnswers.indexOf(surveyQuestion); 

      // is currently selected 
      if (idx > -1) { 
       scope.surveyAnswers.splice(idx, 1); 
      } 
      // is newly selected 
       else { 
       scope.surveyAnswers.push(surveyQuestion); 
      } 
     }; 
     $rootScope.survey.push(scope.surveyAnswers); 
    } 
} 
}); 

작업 코드를 보여줍니다이 plunker을 가지고 있고 그것은 작동하지 않습니다 몇몇 이유.

Answer 1

최신 버전의 각도에서는 코드가 작동하지 않습니다. 이전 버전에서는 격리 범위가 실제로 격리되지 않고 다른 지시문으로 유출되는 버그가있었습니다.

각도 1.2.x에서 격리 범위는 정말로 격리되어 있습니다. 이것은 당신이 지시하지 않는 한 템플릿에 무엇이든 하나를 사용하고 범위에 수동으로 넣어 또는이 (예를 들어 scope: { myVar: '='})

예를 들어, 귀하의 경우 귀하의 템플릿을 surveyQuestions에 액세스 할 수 없습니다 분리 범위 정의에 포함 할 수 없음을 의미 그것 때문에 개인 범위에 정의되지 않았습니다. (ng-init은 surveyCheckbox 지시문 내 격리 범위에 액세스 할 수 없습니다.)

지시문 템플릿에 surveyQuestions을 사용할 수있게하려면 다음을 전달해야합니다. 격리 범위 :

<survey-checkbox questions="surveyQuestions" ng-model="bedsideQ2" ng-init="surveyQuestions = [ 
       { 'value':'value1', 'name': 'The unit' }, 
       { 'value': 'value2', 'name': 'Patient Threw Up'}, 
       { 'value':'value3', 'name': 'Unsafe for children' }, 
       { 'value':'value4', 'name': 'Actively dying, reached life goal'}]"> 
</survey-checkbox> 

그런 다음 격리 범위에 추가하십시오.

scope: { 
    ngModel: '@', 
    surveyQuestions: '=questions' 
}