Javascript 如何在引导后激活新的角度控制器_Javascript_Jquery_Angularjs_Twitter Bootstrap_Angular Controller

Javascript 如何在引导后激活新的角度控制器

javascript jquery angularjs twitter-bootstrap

Javascript 如何在引导后激活新的角度控制器,javascript,jquery,angularjs,twitter-bootstrap,angular-controller,Javascript,Jquery,Angularjs,Twitter Bootstrap,Angular Controller,我有一个角度应用程序，它使用带有ngapp属性的自动引导。随后，我从HTML模板在引导模式对话框中添加DOM子树，如下所示： <!DOCTYPE html> <html ng-app="Foo"> <head> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" /> </head> <body>

我有一个角度应用程序，它使用带有

ngapp

属性的自动引导。随后，我从HTML模板在引导模式对话框中添加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="ViewModalController">
</div>

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

但是，正如我猜想的那样，控制器在加载模式后没有绑定，因为在引导期间，

ng控制器

div不可用

我怎样才能让Angular在装货时把它捡起来？

是的，你说得对。这不起作用，因为它在引导时不在那里，并且您正在使用jQuery加载新模板，Angular没有为其编译模板

为了使事情顺利进行，您应该像这样编译新添加的HTML（在一个控制器中执行此操作并注入

$compile

）：

请参见此处的工作示例：

重要的用于加载模板的远程选项已被弃用，并在引导4中删除。最好不要用它

此外，Angular的UI团队已经为Bootstrap的Javascript功能编写了本机Angular代码，因此在与Angular一起使用时，您不需要jQuery和

Bootstrap.js

文件

签出

是否使用jQuery加载该模板？可能。这是引导中的内部魔法。哦，是的！对的看看我的答案。谢谢你详尽的回答！工作起来很有魅力，但现在我选择了有棱角的UI。

$("#modal").on("shown.bs.modal", function() {
    var $modal = angular.element(document.getElementById('modal'));

    $compile($modal.contents())($scope);
});