Angular js를 사용한 Select2 이벤트 처리

Question

Angular js를 사용하여 내 select2 변경 이벤트가 발생하는 데 문제가 있습니다. 선택 드롭 다운 변경, 변경 이벤트가

<select ui-select2="{allowClear:true}" data-placeholder="Select a Department" ng-change="DoSomething()" class="input-max" ng-model="l.DepartmentID"> 
    <option value=""></option> 
    <option ng-repeat="d in l.LineLookups.Departments" value="{{d.DepartmentID}}">{{d.Type}}</option> </select> 

발생하지 않습니다

여기 내 HTML입니다. 내 컨트롤러의 내 이벤트 처리기는 다음과 같습니다.

$scope.DoSomething = function() { 
     alert('here'); 
     ... 
} 

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? 나는 모델 값에 대한 감시를 설정하라는 지시를 받았습니다. 그게 효과가 있을까요, 아니면 더 좋은 방법이 있을까요? 보기에서

: 컨트롤러에서

<select ui-select2="{allowClear:true}" data-placeholder="Select a Department" class="input-max" ng-model="l.DepartmentID"> 
<option value=""></option> 
<option ng-repeat="d in l.LineLookups.Departments" value="{{d.DepartmentID}}">{{d.Type}}</option> 
</select> 

:

$scope.$watch('l.DepartmentID', function (newVal, oldVal) { 
    if (oldVal == newVal) return; 
    alert('here'); 
}, true); 

Answer 1

대체 각도 이벤트를 발생시킵니다.

// Set initial value - I'm not sure about this but it seems to need to be there 
    elm.select2('data', controller.$modelValue); 
    elm.on('change', function() { 
     scope.$emit('select2:change', elm); 
    }); 

그리고 컨트롤러하는 int 각도 이벤트 리스너를 등록 :

$scope.$on('select2:change', function (event, element) { 
     console.log('change fired by' + element.get(0).id); 
    }); 

Answer 2

당신은 다음 각-UI 라이브러리에 JQuery와 리스너를 추가 할 수 있습니다 NG 모델 시청

는

Answer 3

내가 선택하고 링크 기능에 난 그냥 선택 요소와 이벤트 핸들러에서 검색을 캡슐화하는 지시문을 사용했다.

마크 업

<select data-ng-model="tagsSelection" ui-select2="select2Options"> 
    <option value="{{user.id}}" data-ng-repeat="user in users">{{user.name}}</option> 
</select> 

자바 스크립트 :

link: function (scope, element, attributes) { 
    var select = element.find('select')[0]; 
    $(select).on("change", function(evt) { 
     if (evt.added) { 
      // Do something 
     } else if (evt.removed) { 
      // Do something. 
     } 
    }); 

    $scope.select2Options = { 
     multiple: true 
    } 
}