[英]Angular directive select2-blur event not working as expected
我有以下指令:
angular.module('click-to-edit-select2', [])
.directive("clickToEditSelect2", function() {
var editorTemplate = '<td id="4" class="click-to-edit-select2">' +
'<div id="3" style="height:20px" ng-click="enableEditor()" ng-hide="view.editorEnabled">' +
'{{value}} ' +
'</div>' +
'<div id="2" ng-show="view.editorEnabled" style="padding:0px 10px 0px 0px";>' +
'<input id="1" type="hidden" ui-select2="select2Options" ng-model="view.editableValue" ng-change="changeText()" />' +
'</div>' +
'</td>';
return {
restrict: "A",
replace: true,
template: editorTemplate,
scope: {
value: "=clickToEditSelect2"
},
controller: function($scope, $element, $attrs) {
$scope.view = {
//editableValue: $scope.term.TermId.id,
editorEnabled: false
};
$scope.enableEditor = function() {
if ($scope.$parent.term.Status == "new") {
$scope.view.editorEnabled = true;
$scope.view.editableValue = $scope.value;
}
};
$scope.disableEditor = function() {
$scope.view.editorEnabled = false;
};
$scope.save = function() {
//alert($scope.term.TermId.id);
$scope.value = $scope.view.editableValue.id;
$scope.disableEditor();
};
$scope.$watch('view.editableValue', function(newVal, oldVal) {
if (newVal != undefined && newVal != "") {
if (oldVal == newVal) return;
$element.addClass('valueChangedTD');
var str = newVal.text;
var res = str.split(" - ");
//slice the termID
res.splice(res.length - 1, 1);
var termDescription = res.join(' - ');
}
}, true);
//select2 has its own blur event !
$element.on('select2-blur', function(event) {
$scope.save();
});
var initSelectionCb = function(item, callback) {
if (item != "") {
var id = item.val();
var data = { id: id, text: id };
callback(data);
}
};
$scope.select2Options = {
placeholder: "Select Terminal",
dropdownAutoWidth: 'true',
multiple: false,
width: "resolve",
selectOnBlur: true, //this does not seem to work
initSelection: function(item, callback) {
//selects the initial item
initSelectionCb.call(self, item, callback);
},
ajax: {
url: "/GetDataSelect2",
type: "POST",
contentType: "application/json",
data: function(term, page) {
var Json = {};
Json.term = term;
Json.page = page;
Json.limit = 10;
return Json;
},
results: function(data, page) {
return { results: data.options };
}
}
}
}
};
});
使用select2 3.4.8引導程序2.3.1角度1.2.19
如您所見,我已經設置了onSelectBlur選項(我已經嘗試過'true'和true),但是它不起作用。
我為select2-blur事件添加了一個事件處理程序,但是它沒有按預期工作。
我希望單擊select2 ddl,選擇一個選項,然后單擊tab或單擊某個位置,並使div隱藏了select2(在$ scope.view.editorEnabled設置為false時會發生的情況)。
相反,發生的是從ddl中選擇一個項目,然后在選項卡上單擊或單擊其他位置后,帶有select2 ddl的div沒有被隱藏。 如果我第二次從select2 ddl中選擇一個項目,則具有select2 ddl的div將被隱藏,並顯示具有所選值的div。
我可以看到每次都調用select2-blur事件(通過設置斷點),但是div不會立即更新。 。 。 僅在運行兩次時。
我並不是很想將select2-blur事件附加到$ element(即TD)上,但是我對如何執行此操作感到茫然。 我試圖將事件附加到我發現的其他各種元素(.select2-choice,.select2-container)上,但是我什至無法觸發事件。
現在已經幾個小時了,我想我可以換一雙新鮮的眼睛。 我可能看不到這很簡單。
謝謝!
結果是一個非常簡單的$ scope。$ apply():
//select2 has its own blur event !
$element.on('select2-blur', function(event) {
$scope.save();
$scope.$apply();
});
就是答案。 我想這與在事件的回調中更改$ scope值有關嗎?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.