Question

在用户提交的注册表单中，如果不满足某些要求，则会显示模态窗口。在这个窗口中，用户可以按下后退按钮，隐藏模态窗口（它正在工作）并强制提交表单，这会导致隐藏弹出窗口和发送的$ http.post。成功响应后，位置会发生变化。问题是位置更改后不会删除模态。

如何处理这种情况？我认为我应该在将popupVisible设置为false后以某种方式等待视图更新。怎么样？

以下是代码：

如果popupVisible设置为true，则会显示Popup。

<popup visible="popupVisible">
        ...
        <div style="text-align: center;">
            <button name="back" class="btn btn-primary button-std" ng-click="hidePopup()" style="margin-right:15px;">Powrót</button>
            <button name="register" class="btn btn-primary button-ok" ng-click="save(true)">Utwórz konto</button>
        </div>
     </popup>

保存方法。如果forced设置为true，它应该隐藏弹出窗口然后发送请求：

$scope.save = function(forced) {
        console.log('forced', forced);
        if (forced) {
             $scope.hidePopup();
        }else if (!$scope.user.marketingAccepted) {
            $scope.showPopup();
            return;
        }

        $http.post("rest/registration/register", $scope.user).then(function (response) {
            var data = response.data;
            if (data.success) {
                $location.path("/confirmation");
            }else{
                for (var i in fields) {
                    if (data.errors[fields[i]]) {
                        $scope.UserForm[fields[i]].$error.errorMessage = data.errors[fields[i]];
                    }else{
                        $scope.UserForm[fields[i]].$error.errorMessage = undefined;
                    }
                }
                $window.scrollTo(0, 0);
            }
        });

方法hidePopup在没有位置更改的情况下调用时工作正常。

$scope.hidePopup = function(){
        $scope.popupVisible = false;
    };

弹出式定义：

angular.module('certum').directive('popup', function () {
    return {
        template: '<div class="modal fade">' + 
            '<div class="modal-dialog">' + 
              '<div class="modal-content">' + 
                '<div class="modal-header">' + 
                  '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
                  '<h4 class="modal-title">Uwaga</h4>' + 
                '</div>' + 
                '<div class="modal-body" ng-transclude></div>' + 
              '</div>' + 
            '</div>' + 
          '</div>',
        restrict: 'E',
        transclude: true,
        replace:true,
        scope:true,
        link: function postLink(scope, element, attrs) {
            scope.$watch(attrs.visible, function(value){
            if(value == true)
              $(element).modal('show');
            else
              $(element).modal('hide');
          });

          $(element).on('shown.bs.modal', function(){
            scope.$apply(function(){
              scope.$parent[attrs.visible] = true;
            });
          });

          $(element).on('hidden.bs.modal', function(){
            scope.$apply(function(){
              scope.$parent[attrs.visible] = false;
            });
          });
        }
      };
    });

AngularJS + Bootstrap - 位置更改后模态窗口不会关闭

0 个答案: