2

カスタム select2 ドロップダウンを作成する入力要素のディレクティブを作成しました。
要素を選択した後、元の入力フィールド (ngModel を介してデータをフィルター処理するために使用される) には、ドロップダウンから選択されたデータが入力されますが、入力の変更イベントは発生しません。
入力値を手動で変更すると、フィルターが機能しています。

これが私のディレクティブのコードです。

.directive('ajaxSelect2', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            switch(element.prop("tagName")) {
                case 'INPUT':
                    $timeout(function() {
                        element.select2({
                            [ ... ] //the select2 part
                        });
                    });
                break;
            }

            /* update the input value */
            element.bind("change", function(e) {
                scope.$apply(function() {
                    scope[attrs.ngModel] = e.val;
                });
            });

            scope.$watch(element, function () {
                console.log('x'); //not called
            });
        }
    }
}])

でビューの更新がトリガーされると思いましたelement.bind("change")がscope.apply()、機能しません。ngModel に新しいデータがあることを伝える方法を知っている人はいますか?

EDIT: I figured out, the problem is the ngModel. Because I have to filter several values, my Model is filter.foobar. This is not working. If I change the model to foobar, it will work. I created a fiddle to illustrate: http://jsfiddle.net/StinsonMaster/6t3Nt/3/

4

2 に答える 2

0

代わりにそれを返す関数を使用して試行elementの一部ではないため:scope

scope.$watch(function () {
  return element;
}, function () {
  console.log('x');
});
于 2013-12-18T09:48:09.457 に答える