Content (with Controller, etc) loaded inside Bootstrap-modal is not being recognized by AngularJS at all

I have a legacy application that is using the Bootstrap modal plugin (v3) to load content from the server. In one of these pages, there is an angular controller with a repeater.

It looks like when this content is loaded via the Bootstrap modal data toggle, AngularJS does not bind at all in this content. It’s not doing anything, my guess is that ANgular is not even aware that the DOM changed? But how do I force this “compilation” after the Modal is shown? This way of loading content is everywhery on this application so a major refactor to “properly” launch popups using AngularJS itself is not an option.

Answer

For other people having this problem, the solution was to, effectively, compile the content of the modal loaded. Then apply the scope to the element, after the modal is shown (not sure how it works with latency, but the workaround would be to call it on document ready within the modal content itself):

mainApp.controller("mainAppController", function mainAppController($scope, $http, $compile) {
  $scope.reinitializeModalContent = function(modalId) {
    let modalDom = angular.element(modalId);
    var linkFn = $compile(modalDom);
    var element = linkFn($scope);
  }
});

And the expected call back on load:

$("#myModal").on("shown.bs.modal", function() { 
     angular.element("#mainAppController").scope().reinitializeModalContent("#myModal");
})

For more documentation regarding the $compile function, see: https://docs.angularjs.org/guide/compiler

Leave a Reply

Your email address will not be published. Required fields are marked *