javascript - 如何在 div 中加载 AngularJS

我有一个具有这种结构的主页。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>..:: Test Application ::..</title>
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" href="../css/main.css" />
        <script src="../js/jquery.js"></script>
        <script src="../bootstrap/js/bootstrap.min.js"></script>

        <script>

          function loadOption(idopt){
              if(idopt==1){
                 var curl = '../view/otherpage.php'
              }
              $("#mainContainer").load(curl);
          }        

        </script>

     <body onLoad=loadOption(<?php echo idopt;?>)>
       <div id="mainContainer"></div>
     </body>

</html>

otherpage.php

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/angular.min.js"></script>
    </head>
    <body>
        {{1+1}}
    </body>
</html>

但是，当我加载主页时... AngularJS 不运行。可能出了什么问题？

最佳答案

那是因为您在 DOMContentLoaded 事件完成后加载 otherpage.php。

换句话说，您在 DOMContentLoaded 事件之后用 otherpage.php 内容填充 mainContainer div 内的空间。这就是 Angular 的自动初始化发生的地方。

因此，为了使其正常工作，您必须手动引导 Angular。

这是 Angular 的相关文档:

http://docs.angularjs.org/guide/bootstrap

其他选项可用并且更好，例如在主页上引用 Angular 相关文件( Angular 、 Controller 、服务、指令等等)。

关于javascript - 如何在 div 中加载 AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22490458/