Bootstrap-modal 中加载的内容（带有控制器等）根本无法被 AngularJS 识别

Question

我有一个遗留应用程序正在使用 Bootstrap 模态插件 (v3) 从服务器加载内容。在这些页面之一中，有一个带有中继器的 angular 控制器。

看起来当通过 Bootstrap 模态数据切换加载此内容时，AngularJS 根本没有绑定此内容。它什么也没做，我猜 ANgular 甚至不知道 DOM 改变了？但是，如何在显示模式后强制执行此“编译”？这种加载内容的方式在这个应用程序中无处不在，因此使用 AngularJS 本身“正确”启动弹出窗口的主要重构不是一个选项。

Answer 1

对于遇到此问题的其他人，解决方案是有效地编译加载模式的内容。然后在显示模式后将范围应用于元素（不确定它如何处理延迟，但解决方法是在模式内容本身内准备好文档时调用它）：

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);
  }
});

加载时的预期回调：

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

有关 $compile 函数的更多文档，请参阅：https://docs.angularjs.org/guide/compiler

Bootstrap-modal 中加载的内容（带有控制器等）根本无法被 AngularJS 识别

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

angularjs

bootstrap-modal