Chọn2 xử lý sự kiện với Angular js

Question

Tôi đang gặp sự cố khi chọn sự kiện on2 thay đổi select2 của mình để kích hoạt bằng js Angular.

Dưới đây là html của tôi:

<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> 

Khi chọn thay đổi thả xuống, sự kiện thay đổi không cháy. Đây là trình xử lý sự kiện của tôi trong bộ điều khiển của tôi:

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

Cách tốt nhất để xử lý vấn đề này là gì? Tôi đã được yêu cầu đặt một chiếc đồng hồ trên giá trị mô hình. Liệu nó có hiệu quả hay không?

Answer 1

Alternative bằng cách quan sát ng mô hình:

Theo quan điểm:

<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> 

Trong điều khiển:

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

Answer 2

Bạn có thể thêm một người biết lắng nghe jquery vào thư viện góc-ui, mà sau đó chỉ kích hoạt sự kiện góc - như sau:

// 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); 
    }); 

Và sau đó đăng ký một sự kiện nghe góc int bộ điều khiển:

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

Answer 3

tôi đã sử dụng một chỉ thị để đóng gói các lựa chọn và sau đó trong chức năng liên kết Tôi chỉ lấy yếu tố lựa chọn và đồng xử lý sự kiện.

Markup

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

Javascript:

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 
    } 
}