Recently, I developed a piece of code that integrates bootstrap modals with Angular, allowing for the loading of links into modals upon click. The challenge arose when these links contained their own Angular controllers embedded within them. While attempting to load the modal, I used jQuery to bring in all necessary scripts before compiling the modal using Angular to make it function correctly. However, an issue emerged where even though I defined the controller dynamically at runtime during the modal load process, Angular failed to recognize it and threw an error (Uncaught Error: Argument 'ControllerName' is not a function, got undefined).
Is there a way to instruct Angular to acknowledge the new controller added during runtime?
Below is a snippet of the prototype modal code that I am currently utilizing:
var directivesModule = angular.module('modal.directives', []);
directivesModule.directive("modal", function(ModalService) {
return function($scope, elem, attrs) {
elem.on("click", function(e) {
e.preventDefault();
var url = $(this).attr('href');
ModalService.load(url, $scope);
});
};
});
var servicesModule = angular.module('modal.service', []);
servicesModule.factory('ModalService', function ($http, $compile, $rootScope)
{
var ModalService = {};
// Code for loading and displaying the modal goes here
return ModalService;
});