AngularJS ngModel в директиве

Я написал свою собственную директиву для анализа ввода с данными select2 и gat через ajax.

HTML:

<input type="text"
       ng-model="name"
       data-ui-event="{keyup: 'searchByName($event)',change: 'searchByName($event)'}"
       ajax-select2="single" data-url="/ajax/name/"
/>

JS:

.directive('ajaxSelect2', ['$timeout', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var reqParams = {},
            multiple = attrs.ajaxSelect2 === "multi" ||
                       attrs.ajaxSelect2 === "multiple" ? true : false;

        switch(element.prop("tagName")) {
            case 'INPUT':
                element.select2({
                    multiple: multiple,
                    ajax: {
                        quietMillis: 200,
                        url: attrs.url,
                        dataType: 'json',
                        type: 'POST',
                        data: function (term, page) {
                            var req = {
                                "val": term,
                            };
                            return JSON.stringify(req);
                        },
                        results: function (data, page) {
                            return { results: data };
                        }
                    }
                });
            break;

            default:
                alert('ajax-select2 works only with input fields!');
            break;
        }

        element.bind("change", function () {
            element.show(); //shows the input
            $timeout(function () {
                element.trigger('keyup'); //doesn't work
            });
        });
    }
}}])

Моя проблема: Выбранное значение устанавливается на вход и вызывается функция searchByName, но она не работала с моей ng-моделью. Если я добавлю еще один ввод с ng-model="name", значение также должно быть записано в этот ввод. Но это не так.

EDIT: вот jsFiddle


person Mischa    schedule 24.04.2013    source источник
comment
Где вы используете ng-bind? Или вы имеете в виду нг-модель? Если ng-модель, где-то в ваших обратных вызовах select2, вам нужно вручную обновить scope.name, или ваша функция searchByName уже делает это?   -  person Mark Rajcok    schedule 24.04.2013
comment
Скрипка или плункер помогут нам найти решение.   -  person Galdo    schedule 25.04.2013
comment
Вот дерьмо! Да, ng-модель не ng-bind. У меня было всего две минуты, чтобы написать это. Я сейчас приготовлю скрипку.   -  person Mischa    schedule 25.04.2013
comment
Хорошо, добавил файл jsfiddle. Как видите, все поля, кроме полей, сгенерированных ajax-select2, синхронизированы.   -  person Mischa    schedule 25.04.2013


Ответы (2)


Понятно!
Мне пришлось обновить ng-модель в области видимости вручную.

element.bind("change", function(e) {
    scope.$apply(function() {
        scope[attrs.ngModel] = e.val;
    });
});

Полный пример кода здесь.

person Mischa    schedule 12.06.2013
comment
Этот код не будет работать с точкой в ​​переменной привязки, см. здесь: заголовок stackoverflow.com/questions/16494457/ - person asktomsk; 28.08.2013

Исправьте свой код на:

$timeout(function () {
   element.trigger('keyup'); //doesn't work
}, **Interval**);
person Rasoul Zabihi    schedule 07.05.2013