My web app utilizes AngularJS, Bootstrap 3, and AngularStrap. Initially, I used Bootstrap UI for directives but had to switch to AngularStrap for added functionality like custom popover templates. This migration impacted the implementation of the modal directive, which is what my query revolves around.
Previously, with Bootstrap UI, a security service triggered a login modal when users tried accessing restricted content using a controller from another module. Here's a simplified version of the code:
// Login form controller:
angular.module('LoginForm', []).controller('LoginFormController', ['$scope', 'security', function($scope, security) {
/* Controller logic for 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();
}
};
}]);
However, with AngularStrap, I'm struggling to integrate the logic defined in LoginFormController into modals as there's no controller option. Instead, there's a scope parameter, but I'm unsure how to utilize it effectively. Below is a rough idea of how the modal initialization might look:
// AngularStrap version of $modal:
loginDialog = $modal({
template : 'security/login/form.tpl.html',
scope : /* Inject LoginFormController scope here */
});
For further information, here are the documentation links for Bootstrap UI: http://angular-ui.github.io/bootstrap/#/modal
and for AngularStrap:
Is it feasible to achieve this, or can $modal only be called as a directive in a template with AngularStrap?