如何在 div 中加载 AngularJS答案

【问题标题】：How to load AngularJS in a div如何在 div 中加载 AngularJS
【发布时间】：2014-03-18 20:35:26
【问题描述】：

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

<!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 没有运行。有什么问题？

【问题讨论】：

确保您指定的角度源存在。在浏览器中查看页面的源代码。
我做到了，伙计。另外，我正在使用带有 Ctrl+ Space 的 NetBeans 来查看源代码。

标签： javascript php jquery angularjs

【解决方案1】：

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

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

所以为了让它工作，你必须手动引导 Angular。

这是 Angular 的相关文档：

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

其他选项可用并且更好，例如在主页上引用您的 Angular 相关文件（角度、您的控制器、服务、指令等等）。

【讨论】：

我手动添加了angular.bootstrap，但我的浏览器中没有结果。如果可能的话，你能帮我写一些代码吗？
你真的必须使用手动引导路径吗？我的意思是，这样做有什么具体原因吗？如果没有，请尝试在主页末尾引用 angular.min.js：
正文>
只是出于设计原因。不应该去吗？
好的，我明白了。这是一个问题和答案，可以帮助您开始解决问题：stackoverflow.com/questions/19424357/…

【解决方案2】：

根据浏览器的不同，将 otherpage.php 中的 script 元素从 head 元素中拉出并放入 body 元素中，应该可以更正此问题。

我们看不到您的所有代码，但最好只在主页的head 中加载 Angular.js。您可以使用自己的脚本包管理器控制流来执行此操作，以避免其他依赖项出现此类故障。那会是很好的风格......

【讨论】：

【解决方案3】：

制作一个通用的包含页面并将 angular.js 文件添加到其中并将其包含在标题中，以便在整个站点中可用或在主页中使用它

【讨论】：