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>

P.S。我的引用调用Angular bootstrap，我的index.html中的控制器检出。我也在我的angular.module中包含了ui.bootstrap。实际上，我的控制台中没有错误表明任何缺失的依赖关系或错误的注入。

问题

模态确实打开，但单击按钮或模态区域外时它不会关闭。我不仅希望它消失，而且Yes按钮应该重定向到/ login页面并且模式解散。 No按钮只是取消了模态。单击模态区域外部也会解除模态。
当我点击退出图标时，模态会反复打开一遍又一遍。打开它真是太好了，但是一旦足够了，谢谢大声笑

Answer 1

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

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

您的public ViewB(ViewModelA viewModelA) { InitializeComponents(); var viewModelB = DataContext as ViewModelB; viewModelB.MyViewModelA = viewModelA; }和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

这是工作解决方案

https://jsfiddle.net/zho5k7af/

但是，我将控制器添加到模态中，因此您不会污染var $uibModalInstance = $uibModal.open();。见我的解决方案。

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

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

1 个答案: