AngularJS와 겨 모델은 자기 정의 지시어를 사용 후 작동하지 않습니다

Question

내 JSON 데이터는

[{이름과 같다 : "A", 내용 : [{이름 : "B"콘텐츠를 : {이름 : "c", id : 1}, {...}}}, {...}}}, {이름 : "...", 내용 : [...]}]

그리고 "a"와 "b"가 모두 optionGroup 인 select에 넣으려는 경우 "c"만 옵션입니다. 이 같은 :

-b
  C

샘플 jsfidle은 여기에 있습니다 : http://jsfiddle.net/sunny_jerry/SHxBp/

는 "ngOptions은"내 요구 사항을 충족 수없는 것 같다 그래서 나는 다음과 같은 지시어를 정의한다 :

<select class="compo-tree" x-compo-tree colleges="colleges" ng-model="choice"></select> 

directive('compoTreeNew', function($compile) { 
    return { 
     restrict: 'A', 
     scope: { 
      colleges: "=colleges", 
      choice: "=ngModel" 
     }, 
     link: function($scope, elm){ 
      $scope.$watch("colleges", function(){ 
       angular.forEach($scope.colleges, function(college) { 
        elm.append($("<optgroup>").attr("label", college.name)); 
        angular.forEach(college["departments"], function(department) { 
         var optGroup = $("<optgroup>").attr("label", '- ' + department.name); 
         angular.forEach(department['disciplines'], function(discipline) { 
          optGroup.append($("<option>").attr("value", discipline.id).text(discipline.name)); 
          if (!$scope.choice) { $scope.choice = discipline.id; } 
         }); 
         elm.append(optGroup); 
        }); 
       }); 
      }); 
     } 
    } 
}); 

잘 작동하며 다른 옵션을 선택하면 범위가 변경되는 것을 확인할 수 있습니다.

하지만 초기화 값을 설정할 수 없다는 것을 알았고 언제든지 "선택"을 제어 할 수있는 옵션을 설정할 수 없다는 것을 알았습니다. 단방향 바인딩이 될 것으로 보이지만 필요합니다. 양방향 바인딩.

샘플 jsfidle은 여기에 있습니다 : http://jsfiddle.net/sunny_jerry/SHxBp/는

내가 그것을 어떻게

를 해결할 수 ?

Answer 1

여기에 단지 각 요소는 하나의 범위를 가지고 있다는 것입니다 염두에두고

$scope.$watch('choice', function(val) { 
    elm.val(val); 
}); 

http://jsfiddle.net/SHxBp/2/