AngularStrap——从一个服务中调用一个模态

AngularStrap - calling a modal from within a service?

本文关键字：一个 调用 模态 服务 AngularStrap      更新时间：2023-09-26

我有一个使用AngularJS, Bootstrap 3和AngularStrap的web应用程序。在这个应用程序中，我之前使用的是Bootstrap UI的Bootstrap指令，但我需要迁移到AngularStrap，以获得一些额外的功能(比如为弹出窗口提供自定义模板的能力)。这个迁移改变了modal指令的实现方式，这是我所关心的问题。

在Bootstrap UI中，我有一个安全服务，可以在用户试图访问应用程序中受限制的内容时实现登录模式，利用另一个模块中定义的控制器。下面是我的代码的大致释义(其中大部分来自非常有用的种子项目angular-app):

// Login form controller:
angular.module('LoginForm', []).controller('LoginFormController', ['$scope', 'security', function($scope, security) {
    /* $scope controller logic goes here. Things like login, cancel, clear, etc. */
}]);

// Security service:
angular.module('Security', ['ui.bootstrap','LoginForm']).factory('security', ['$modal', function($modal) {
    var loginDialog = null;
    function openLoginDialog() {
        loginDialog = $modal.open({
            templateUrl : 'security/login/form.tpl.html',
            controller : 'LoginFormController'
        });
        loginDialog.result.then(onLoginDialogClose);
    }
    return {
        showLogin : function() {
            openLoginDialog();
        }
    };
}]);

现在，使用AngularStrap，我不知道如何利用我在LoginForm模块的LoginFormController中定义的控制器逻辑，因为使用AngularStrap，在初始化模态时没有controller选项。有一个scope参数，但我不确定如何最好地利用该参数在这种情况下。我认为模态的初始化应该是这样的:

// AngularStrap version of $modal:
loginDialog = $modal({
    template : 'security/login/form.tpl.html',
    scope : /* LoginFormController scope somehow injected here */
});

作为参考，这里是Bootstrap UI的文档:http://angular-ui.github.io/bootstrap/#/modal

对于AngularStrap: http://mgcrea.github.io/angular-strap/##modals

有可能这样做吗，还是只可能在AngularStrap的模板中调用$modal作为指令?

我发现在这里使用标准的ng-controller语法效果非常好。

不要在代码中设置控制器，而是在模板代码的根目录下使用属性:

<div class="modal" tabindex="-1" role="dialog" ng-controller="MyCustomModalController as ctrl">
...
<button class="btn btn-primary" ng-click="ctrl.ok()" >OK</button>

唯一的技巧是将数据共享回原始控制器。Bootstrap UI使用了一个非常好的回调，但在angular-strap中不起作用。解决方案是使用共享服务——这里已经详细介绍了:一个控制器可以调用另一个控制器吗?

相关文章：