引导后如何激活新的 Angular 控制器

Question

我有一个 Angular 应用程序，它使用带有 ng-app 属性的自动引导。然后，稍后，我在 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>

现在，在模板中，我有一个 div 和一个 ng-controller 属性来将已注册的控制器绑定到它，如下所示：

<div ng-controller="ViewModalController">
</div>

控制器在应用程序中定期注册。

但是，控制器在加载模态后未绑定，我猜是因为 ng-controller div 在引导过程中不可用。

如何让 Angular 在加载时拾取它？

Answer 1

是的，你是对的。这不起作用，因为它在 Bootstrap 时不存在，并且您正在使用 jQuery 加载新模板，而 Angular 没有编译模板。

为了让事情正常进行，您应该像这样编译新添加的 HTML（在您的控制器之一中执行此操作并注入 $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 文件

结帐http://angular-ui.github.io/bootstrap/#/modal

引导后如何激活新的 Angular 控制器

How to activate new Angular controller after bootstrapping

javascript

jquery

angularjs

twitter-bootstrap

angular-controller

重要