我有一个 Angular 应用程序，它使用带有 ng-app 属性的自动 Bootstrap 。然后，稍后，我从 HTML 模板在 Bootstrap 模态对话框中添加一个 DOM 子树，如下所示:
<!DOCTYPE html>
<html ng-app="Foo">
<head>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
</head>
<body>
<a href="template.html" data-toggle="modal" data-target="#modal">Modal</a>
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/angular.js/angular.js"></script>
</body>
</html>
现在，在模板中，我有一个带有 ng-controller 属性的 div，用于将已注册的 Controller 绑定(bind)到它，如下所示:
<div ng-controller="ViewModalController">
</div>
Controller 定期在应用程序中注册。
但是， Controller 在加载模式后未绑定(bind)，正如我猜测的那样，因为 ng-controller div 在 Bootstrap 期间不可用。
我怎样才能让 Angular 在加载时拾取它？
最佳答案
是的，你是对的。这是行不通的，因为它在 Bootstrap 时不存在，并且您正在使用 jQuery 加载新模板，而 Angular 没有为其编译模板。
为了使事情正常进行，您应该像这样编译新添加的 HTML(在您的 Controller 之一中执行此操作并注入(inject) $compile):
$("#modal").on("shown.bs.modal", function() {
var $modal = angular.element(document.getElementById('modal'));
$compile($modal.contents())($scope);
});
请参阅此处的工作示例:https://plnkr.co/edit/zASHzGwOLxku12Ae5hnP?p=preview
重要
您用来加载模板的远程选项已被弃用，并在 Bootstrap 4 中被删除。最好不要使用它。
此外，Angular 的 UI 团队已经为 Bootstrap 的 Javascript 功能编写了原生的 Angular 代码，因此您在使用 Angular 时不需要 jQuery 和 bootstrap.js 文件。
关于javascript - Bootstrap 后如何激活新的 Angular Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38543619/