[英]AngularJS ngModel in directive
我寫了自己的指令來通過ajax使用select2和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
得到它了!
我必須手動更新范圍內的ng-model。
element.bind("change", function(e) {
scope.$apply(function() {
scope[attrs.ngModel] = e.val;
});
});
完整的代碼示例在這里 。
將代碼更正為:
$timeout(function () {
element.trigger('keyup'); //doesn't work
}, **Interval**);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.