Question

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

使用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作为指令调用？

Answer 1

我发现使用标准的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使用了一个非常好的回调，它不适用于角带。解决方案是使用共享服务 - 这里详细介绍了这一点：Can one controller call another?

AngularStrap - 从服务中调用模态？

1 个答案: