2012-11-19 3 views
0

내가AngularJS와 + kendoui 드롭 다운리스트

angular.module('xxx', [ 
]) 
    .directive('qnDropdown', [ 
     '$parse', 
     function($parse) { 
      return { 
       restrict: 'A', 
       require: 'ngModel', 
       link: function(scope, elem, attr, ngModel) { 
        scope.$watch(attr.qnDropdown, function(source) { 
         var model = $parse(attr.ngModel); 

         elem.kendoDropDownList({ 
          dataTextField: "Name", 
          dataValueField: "ID", 
          value: attr.value, 
          select: function(e) { 
           var item = this.dataItem(e.item.index()); 
           scope.$apply(function() { 
            model.assign(scope, item.value); 
           }); 
          }, 
          //template: '<strong>${ data.Name }</strong><p>${ data.ID }</p>', 
          dataSource: source 
         }); 

        }); 
       } 
      }; 
     }]); 

입력 필드가

<input qn:dropdown="locations" ng:model="installation.LocationID" value="{{installation.LocationID}}" /> 

kendoDropDownList에 대한 미세하지만 초기 값은 작성되지 작동하는 모든 것이 지시어를 (값 : attr.value을). 잘못된 장소 나 시간에 무언가를하고 있다고 생각하지만 확실하지 않습니다.

답변

0

당신은 아마 $observe를 사용해야합니다 :

사용 $observe 보간 (예를 들어, src="{{bar}}")를 포함하는 속성 값의 변화를 관찰 할 수 있습니다. 이것은 매우 효율적 일뿐만 아니라 연결 단계에서 아직 보간이 평가되지 않았으므로이 값이이 값을 undefined로 설정하기 때문에 실제 값을 쉽게 얻을 수있는 유일한 방법이기도합니다. - docs, 속성을 참조하십시오..

여기에 최근에 $ 관찰을 사용했던 an example입니다. $ watch를 사용하는 @ asgoth의 대답도 참고하십시오. 그러나 격리 스코프도 만들었습니다.

우리가 $ watch를 사용할 수있을 때 $ observe 대 사용해야 할 때가 아직 명확하지 않습니다.

0

{{installation.LocationID}} 값을 알고 있습니까? 내 상황에 맞게 코드를 복사하여 붙여 넣을 수 있었고 드롭 다운 목록은 멋지게 작동합니다 (열심히 해주셔서 감사드립니다!). 입력 필드에 value을 채우고 있고 지시문이 실행될 때 attr.value이 있고 검도가 예상대로 표시합니다. 아마 이것은 이전 버전의 Angular 문제였습니까?

0

동일한 문제가 발생하여 attr.value이 비어 있습니다. 문제는 $ http 비동기 호출이 데이터를 가져 오는 것과 관련이 있습니다. 드롭 다운 목록이 지시문에 정의 될 때 범위 데이터가 아직 채워지지 않았습니다.

지시어의 링크 기능에서 attr.qnDropdown 대신 attr.ngModel을보고이 문제를 해결했습니다. 이 방법은 스코프 데이터가 채워질 때 드롭 다운리스트가 정의되게합니다.