我有一个下拉列表,如果用户不想继续,则需要取消ng-change事件. prevIoUsPortfolioId值在$scope中正确设置,但视图仍显示更改的值.我尝试了$scope.$apply也适用,但没有工作.如何取消ng-change事件？
Template.html
<select style="width:200px;" ng-model="SelectedPortfolioId" ng-change="PortfolioSelectionChange(SelectedPortfolioId)" ng-options="Portfolio.BlendId as Portfolio.BlendName for Portfolio in Portfolios"> </select>
Controller.js
$scope.PortfolioSelectionChange = function (SelectedPortfolioId) {
var prevIoUsPortfolioId = $scope.SelectedPortfolioId;
if ($scope.IsPageDirty) {
var promise = DisplayConfirmation('Your unsaved changes will be lost. Do you want to continue?');
promise.done(function () {
// do something
});
promise.fail(function () {
// cancel the change
$scope.SelectedPortfolioId = prevIoUsPortfolioId;
});
}
};
解决方法
首先,您无法取消更改事件.见这里：
https://developer.mozilla.org/en-US/docs/Web/Events/change它说它不可取消.但是,您可以阻止更改绑定到窗体控件的模型,然后还原窗体字段值.
您可以使用ng-model-options并将updateOn设置为自定义事件来完成此操作. NG-模型选项= “{updateOn： ‘确认’}”
下面的指令将显示确认消息,如果接受,则使用ngmodelcontroller更新模型.如果确认被拒绝,则表单字段值将设置回模型值中存储的值.
这很好,因为任何针对相同型号值的手表都不会触发.
(function () {
'use strict';
angular.module('app.registration')
.directive('confirm',function ($window) {
return {
require: 'ngModel',link: function (scope,el,att,ctrl) {
var message = att.confirm;
el.on('change',function (){
var val = ctrl.$modelValue;
if (!val || $window.confirm(message)) {
ctrl.$setViewValue(el.val(),'confirmed');
ctrl.$$debounceViewValueCommit('confirmed');
}
else {
el.val(val);
}
});
}
};
});
})();
