Question

在我的应用程序中，我有2页。我的第一页上有一个按钮，单击该按钮会转到第二页：

  <a href="#/second-page" class="btn btn-default" >

在第二页上，我想在加载第二页后立即显示模式弹出窗口。为此，我在第二个控制器中使用以下代码来显示弹出窗口。

    var modalInstance = $modal.open({
            templateUrl: myUrl + 'app/page/modal.html',
            controller: 'secondPageCtrl',
            backdrop: 'static',
            keyboard: false
        });

当有人在模式上按“取消”时，我想关闭模式，然后返回到我的第一页：

     $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
        $state.go('first-page');
    };

一切正常。现在，问题是在上述重定向之后，当我再次按下第一页上的按钮时，默认情况下在第二页的页面加载中未打开模式弹出窗口。看起来像是隐藏的，并且未触发打开模态的控制器代码。

还有其他需要添加的内容吗？

-----------更新--------------

这是我的朋克 http://jsfiddle.net/b9y2Lc5x/

我发现了问题，但没有找到解决方案。问题是我正在使用工厂作为我的角度服务，并且已经在该服务中定义了我的模态。在我的控制器中，我将服务称为：

        $scope.mymodal = myService.createModal;

在我的服务中，没有createModal变量/方法。不知道为什么它在我的应用程序中没有给出错误，但在我的jsfiddle中却给出了错误。

所以现在这里有两个问题： -如何在服务中定义createModal，以便可以从控制器中调用它。 -这是调用模态即从控制器到服务的正确方法吗？还是应该在控制器中移动打开模态的逻辑。

Answer 1

$modal.open()函数返回一个Promise（在result属性中）。

当使用$modalInstance.close()关闭模态时，承诺将得到解决。

当使用$modalInstance.dismiss()关闭模式时，承诺将被拒绝。

您应在模式完全关闭后在promise处理代码中触发重定向，例如：

var modalInstance = $modal.open({
    templateUrl: myUrl + 'app/page/modal.html',
    controller: 'secondPageCtrl',
    backdrop: 'static',
    keyboard: false
});

modalInstance.result.then(function () {
    // Success, do nothing
}, function () {
    $state.go('first-page');
});

在OP添加JSFiddle后进行编辑：

问题在于，实例化工厂后会打开您的模态。 AngularJS中的服务（和工厂）是单例的，这意味着它们仅实例化一次。

将工厂更改为此：

app.factory("myService",[ "$state", "$modal", "ApiFactory",
    function ($state, $modal, factory) {
            var service = {
            openModal: openModal
        };

        function openModal () {
            var modalInstance = $modal.open({
                templateUrl: 'modal.html',
                controller: 'ModalController',
                backdrop: 'static',
                keyboard: false
            });

            modalInstance.result.then(function() {
                // Success, do nothing
            }, function() {
                $state.go('index');
            });

            return modalInstance;
        }

        return service;
    }
]);

并在控制器中调用openModal函数（每次状态变为活动状态时都会实例化控制器）

$scope.mymodal = myService.openModal();

在这里工作的JSFiddle：http://jsfiddle.net/Protozoid/z20yvbfx/。

AngularJs：页面加载时自动打开模式

1 个答案: