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请求？

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

addModal
模态已关闭
{ “平衡”：0， “runningTotals”：0}
点击按钮
ASD

总而言之，我想知道为什么每次打开模态时都会启动我的ModalService的“.then”部分中的代码，而不是每次关闭它时。任何帮助都会受到赞赏，欢呼！

Answer 1

根据角度ui引导结果（类型：承诺）的文档在关闭模态时解决，在解除模态时拒绝。为了使您的代码看起来更干净，我建议您声明变量modalInstance 然后使用结果来解决或拒绝承诺

modalInstance.result.then(function (result) {

  console.log(result);

}, function () {

  console.log('modal dismissed');

});

Angularjs模式在关闭时没有运行代码

1 个答案: