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中的控制器签出了。我把ui.bootstrap也包括在我的angular.module里。实际上，我的控制台中没有显示缺少依赖项或错误注入的错误。

问题

1. 模态是打开的，但当我单击按钮或模态区域外时，它不会关闭。我不仅希望它消失，而且Yes按钮应该重定向到/login页面，模式被取消。No按钮刚刚取消了模态。单击模态区域外部也会取消模态。
2. 这个模式一次又一次地打开，就像我点击注销图标一样多。打开它真是太好了，但一次就足够了，谢谢你

Answer 1

在您的代码中，很少有东西不起作用。

让我们从最重要的事情开始:为什么模态不关闭？

您的ok和cancel方法被分配给modalController作用域，但是您没有将任何作用域传递给您的模型，所以它使用的是$rootScope，它没有ok和close方法。要解决这个问题，您必须向$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/