Angular js ile Select2 olay yönetimi

Question

Angular js kullanarak select2 on-change olayımı tetiklemek için bir sorun yaşıyorum. seçme açılan değişiklikleri, değişiklik olayı

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

patlamaz:

Benim html.

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

Bunu halletmenin en iyi yolu nedir: İşte benim denetleyicisi benim olay işleyicisi var? Model değerine bir saat koyması söylendi. Bu işe yarayacak mı, yoksa daha iyi bir yolu var mı? görünümünde

: denetleyicisi

<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

alternatif sadece bir açısal olayı tetikler - böyle bir şey:

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

Sonra denetleyici int bir açısal etkinlik işleyici kaydetmek:

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

Answer 2

Ardından açısal ui kütüphane, bir jquery dinleyici ekleyebilir ng model izleyerek

Answer 3

ben seçme ve sonra bağlantı işlevi sadece seçme elemanı ve olay işleyicisi almak enkapsüle bir yönerge kullanılır.

Biçimlendirme

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