Question

我有一个下拉列表，如果用户不想继续，则需要取消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;
        });
    }
};

Answer 1

首先，您无法取消更改事件。见这里：https://developer.mozilla.org/en-US/docs/Web/Events/change它说它不可取消。但是，您可以阻止更改绑定到窗体控件的模型，然后还原窗体字段值。

您可以使用ng-model-options并将updateOn设置为自定义事件来执行此操作。 ng-model-options="{updateOn:'confirmed'}"

下面的指令将显示确认消息，如果接受，则使用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);
            }
          });
        }
      };
    });
})();

Answer 2

不仅仅是一个普通的＆＃39;确认工作？

$scope.PortfolioSelectionChange = function(portfolio) {
    if (confirm('Your unsaved changes will be lost. Do you want to continue?')) {
        // proceed with what you need to do
    }
}

Answer 3

我实际上不喜欢我的答案（我在这里寻找更好的答案！），但据我所知，没有什么比你可以打电话的event.cancel了。在变更事件期间编辑变量似乎没有采取，所以我最终做的是将$ timeout传递给我的控制器并排队更改：

after_destroy :delete_self!

def delete_self!
if persisted?
  self.delete
end

ng-change之前的角度下拉确认

3 个答案: