javascript - AngularStrap - 从服务中调用模态？

Question

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

使用 Bootstrap UI，我有一个安全服务，可以在用户尝试访问应用程序中的受限内容时使用另一个模块中定义的 Controller 来实现登录模式。这是我的代码的粗略解释(其中大部分来自非常有用的种子项目，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 中定义的 Controller 逻辑，因为使用 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 作为指令调用？

Answer 1

我发现使用标准的 ng-controller 语法在这里很有用。

不是从代码中设置 Controller ，而是使用模板代码根部的属性:

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

唯一的技巧是将数据共享回原始 Controller 。 Bootstrap UI 使用了一个非常好的回调，它不适用于 angular-strap。解决方案是使用共享服务 - 此处已详细介绍:Can one controller call another?