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

I have a dropdownlist and need to cancel the ng-change event if user does not want to proceed. The previousPortfolioId value is setting correctly in the $scope but the view is still displaying the changed value. I tried $scope.$apply also, but not working. How do I cancel the ng-change event?

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

3 个解决方案

#1

Firstly you cannot cancel a change event. See here: https://developer.mozilla.org/en-US/docs/Web/Events/change It states it is not cancelable. However you can prevent the model bound to the form control from being changed and then revert the form fields value.

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

You can do this by using ng-model-options and setting the updateOn to a custom event. ng-model-options="{updateOn:'confirmed'}"

您可以使用ng-model-options并将updateOn设置为自定义事件来完成此操作。 NG-模型选项= “{updateOn： '确认'}”

The directive below will show a confirm message and if accepted uses the ngmodelcontroller to update the model. If the confirm is denied then the form fields value is set back to what is stored in the model value.

下面的指令将显示确认消息，如果接受，则使用ngmodelcontroller更新模型。如果确认被拒绝，则表单字段值将重新设置为存储在模型值中的值。

This is good because any watches targeting the same model value wont ever trigger.

这很好，因为任何针对相同型号值的手表都不会触发。

(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);
            }
          });
        }
      };
    });
})();

#2

Wouldn't just a plain ol' confirm work?

不只是一个简单的'确认工作？

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

#3

I actually don't like my answer (I was here looking for a better one!), but as far as I can see there's nothing like an event.cancel you can call. Editing the variable during its change event just doesn't seem to take, so what I ended up doing was passing $timeout to my controller and queueing the change:

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

    promise.fail(function () {
        // cancel the change
        $timeout(function () {
             $scope.SelectedPortfolioId = previousPortfolioId;
        }, 0);
    });

#1