关闭时Angularjs模式不运行代码

Question

我是一个完全的 AngularJS 初学者，我很难让一个模态表现得像我想要的那样。 简而言之，问题是：模式的“.then”部分中的代码在打开模式时运行，而不是在关闭模式时运行。请参阅我的代码下方的进一步说明。 我的 index.html 中有一个调用函数的按钮：

<button type="button" ng-click="addModal()" class="btn btn-default">
                    <span class="glyphicon glyphicon-plus"> Add account</span>
                </button>

我的控制器定义如下所示：

app.controller('MyController', ['$scope','$http', '$modal',
 'ModalService', function ($scope, $http, $modal, ModalService) 

MyController 中的 addModal 函数如下所示：

$scope.addModal = function () {
    console.log("addModal");

    ModalService.showModal({
        templateUrl: "/addAccount.html",
        controller: "addController"
    }).then(function(modal) {
        modal.element.modal();
        console.log('asd')
        modal.close.then(function(result) {
            console.log("Modal closed");
            $scope.settings = {};
            $scope.settings.balance = 0;
            $scope.settings.runningTotals = 0;
            $scope.settings.firstName = result.first;
            $scope.settings.lastName = result.last;
            $scope.settings.address = result.add;
            $scope.settings.postcode = result.post;
            $scope.settings.telephone = result.tele;
            $scope.settings.pin = result.pin;


            var json = JSON.stringify($scope.settings);
            console.log(json);
            console.log("Clicked button");

            return $http.post("http://abcmoneygroup.cloudapp.net/Service1.svc/createAccount", json);
        });
    });

我正在使用this 服务来创建模态。 我的模态控制器看起来像这样：

app.controller('addController', ['$scope','close', '$element', function ($scope, close, $element) {

$scope.first = null;
$scope.last = null;
$scope.add = null;
$scope.post = null;
$scope.tele = null;
$scope.pin = null;

$scope.close = function () {
    console.log('close called')

    close({
        formfirstName: $scope.first,
        formLastName: $scope.last,
        formAddress: $scope.add,
        formPostCode: $scope.post,
        formTelephone: $scope.tele,
        formPin: $scope.pin
    }, 500);

};

    $scope.cancel = function () {
        $element.modal('hide');

        close({

        }, 500);
    };

}]);

最后 addAccount.html 包含这个按钮：

<button type="button" class="btn btn-success" ng-click="close()" data-dismiss="modal">
                    <span>Save new account</span>
                </button>

我的问题是，当我第一次单击“添加帐户”按钮时，我的模式出现了。在控制台中，我看到两行：“addModal”和“asd”。 在 addAccount.html 中填写表格后，然后单击“保存新帐户”按钮。然后模式关闭，在控制台中我看到以下行：“关闭调用”。 为什么现在没有发起 Http.post 请求？

如果我现在再次单击“添加帐户”按钮，模式将打开，我会在控制台中看到以下行：

• 添加模态
• 模态关闭
• {"balance":0,"runningTotals":0}
• 点击按钮
• asd

总之，我想知道为什么我的 ModalService 的“.then”部分中的代码每次打开模式时都会被启动，而不是每次我关闭它时都会启动。任何帮助将不胜感激，干杯！

Answer 1

根据 angular ui bootstrap 结果（类型：promise）的文档，当模态关闭时解决，当模态关闭时被拒绝。 为了让你的代码看起来更干净，我建议你声明一个变量modalInstance 然后使用结果来解决或拒绝承诺

modalInstance.result.then(function (result) {

  console.log(result);

}, function () {

  console.log('modal dismissed');

});