Angular jsを使用したSelect2イベント処理

Question

Angular jsを使用してselect2 on-changeイベントを発生させる際に問題が発生しました。選択ドロップダウンの変更は、変更イベントが

<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'); 
     ... 
} 

これを処理するにはどうすればよいでしょうか？私はモデル値を監視するように言われました。それはうまくいくのでしょうか、それとも良い方法がありますか？ NG-モデルを見て

Answer 1

オルタナティブ：ビューで

：コントローラで

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

あなたはどのその後、角度-UIライブラリにjqueryのリスナーを追加することができます角度イベントを発生させます。このようなもの：

そしてコントローラint型の角イベントリスナーを登録します。

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

Answer 3

私は選択をカプセル化して、リンク機能では、私はちょうどselect要素を取得し、イベントハンドラにするディレクティブを使用。

マークアップ

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