AngularStrap - calling a modal from within a service?

Question

I have a web app that is using AngularJS, Bootstrap 3, and AngularStrap. In this app, I was previously using Bootstrap UI for the Bootstrap directives, but I needed to migrate to AngularStrap in order to have some additional functionality (such as the ability to provide a custom template for popovers). This migration changed how the modal directive is implemented, which is the concern of my question.

With Bootstrap UI, I had a security service that could implement a login modal whenever the user attempted to access restricted content in the app, utilizing a controller defined in another module. Here is a rough paraphrasing of my code for this (much of this is derived from the very useful seed project, 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();
        }
    };

}]);

Now, using AngularStrap, I can't figure out how to utilize the controller logic I had defined in the LoginForm module's LoginFormController, because the with AngularStrap, there is no controller option when initializing a modal. There is a scope parameter, but I am not sure how best to utilize that parameter in this situation. I am thinking the initialization of the modal would be something along these lines:

// AngularStrap version of $modal:

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

For reference, here are the docs for Bootstrap UI: http://angular-ui.github.io/bootstrap/#/modal

and for AngularStrap: http://mgcrea.github.io/angular-strap/##modals

Is it possible to do this, or is it only possible to call the $modal as a directive in a template with AngularStrap?

score 0 · Answer 1 · edited May 23 '17 at 11:56

I have found that using the standard ng-controller syntax works like a charm here.

Instead of setting the controller from within the code, use the attribute on the root of the template code:

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

The only trick is sharing the data back to the original controller. Bootstrap UI used a really nice callback which doesn't work with angular-strap. The solution is use a shared service - which has been covered at length here: Can one controller call another?

AngularStrap - calling a modal from within a service?

1 Answers1