Angular.ui 模态不会关闭或取消

Question

我找不到为这个问题命名的方法，所以如果您能提出更好的方法，请告诉我。无论如何，关于我的问题。

当用户想要注销时，我正在实现一个模式。用户单击注销图标。该图标在我的控制器中使用注销功能调用模式，如下所示：

<li ng-controller="modalController">
     <a href="" class="mb-control" ng-click="logout();" ><span class="fa fa-sign-out"></span></a>
</li>

我的 modalController 看起来像这样

app.controller('modalController', ['$scope', '$location', '$uibModal', '$log', function($scope, $location, $uibModal, $log, $uibModalInstance) {
    $scope.logout = function(){
        $uibModal.open({
            templateUrl: 'views/partials/logoutMsg.html'
        });

        $scope.ok = function () {
            $uibModalInstance.close();
            $location.path('/login');
        };

        $scope.cancel = function () {
            $uibModalInstance.dismiss();
        };
    };
}]);

我的模态模板里面有这个：

<div class="mb-container">
    <div class="mb-middle">
        <div class="mb-title"><span class="fa fa-sign-out"></span> Log <strong>Out</strong> ?</div>
        <div class="mb-content">
            <p>Are you sure you want to log out?</p>
            <p>Press No if you want to continue work. Press Yes to logout current user.</p>
        </div>
        <div class="mb-footer">
            <div class="pull-right">
                <button class="btn btn-primary mb-control-close" ng-click="cancel()">No</button>
                <button ng-click="ok()" class="btn btn-success">Yes</a>
            </div>
        </div>
    </div>
</div>

附言我在 index.html 中对 Angular 引导程序和控制器的引用调用已签出。我也将 ui.bootstrap 包含在我的 angular.module 中。实际上，我的控制台中没有任何错误表明任何缺少依赖项或错误注入。

问题

1. 模式确实打开了，但是当我单击按钮或在模式区域之外时它不会关闭。我不仅希望它消失，而且Yes 按钮应该重定向到 /login 页面并且模式消失。 No 按钮只是关闭模式。在模态区域外单击也会关闭模态。

2. 当我单击注销图标时，模式会一遍又一遍地打开。打开它很棒，但是一次就足够了，谢谢你lol

Answer 1

您的代码中有几处不起作用。

让我们从最重要的事情开始：为什么模式没有关闭？。

您的 ok 和 cancel 方法已分配给 modalController 范围，但您没有将任何范围传递给您的模式，因此它使用 $rootScope 并且它没有 ok 和 @987654328 @ 方法。要解决此问题，您必须将范围传递给 $uibModal.open 方法，因此它应该如下所示：

$uibModal.open({
    templateUrl: 'views/partials/logoutMsg.html',
    scope: $scope //using modalController scope
 });

但这并不能解决问题。在ok 和cancel 中，您指的是$uibModalInstance，但它是undefined。您可能认为将其注入控制器即可解决问题，但事实并非如此。它无法注入 - 如果您将其注入模态中的控制器，因此要解决此问题，您需要将 $uibModal.open 的结果分配给变量。

var $uibModalInstance = $uibModal.open();

这是可行的解决方案

https://jsfiddle.net/zho5k7af/

但是我会在模态中添加一个控制器，这样你就不会污染$scope。请参阅我的解决方案。

https://jsfiddle.net/3dhubhrm/1/