入力をselect2で解析し、ajax経由でデータをgatする独自のディレクティブを作成しました。
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-model では機能しませんでした。ng-model="name" で別の入力を追加すると、値もこの入力に書き込まれます。しかし、そうではありません。
編集:ここにjsFiddleがあります