2014-03-18 75 views
0

我有一個帶有這種結構的主頁面。如何在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不會運行。什麼可能是錯的?

+0

確保您指定的角度源存在。在瀏覽器中查看頁面的來源。 –

+0

我做到了。另外,我使用Ctrl +空格來查看源代碼。 –

回答

0

根據瀏覽器的不同,將otherpage.php中的script元素從head元素中拉出並放入body元素中,應該更正此問題。

我們看不到所有的代碼,但是在主頁面的head中加載Angular.js可能會更好。您可以使用您自己的腳本程序包管理器控制流來執行此操作,以避免其他依賴項出現此類故障。這將是良好的作風......

0

做出共同的包括網頁和angular.js文件添加到它,並將其納入了頭,使其可通過出該網站或主頁

2
使用

這是因爲您在DOMContentLoaded事件完成後加載otherpage.php。

換句話說,在事件DOMContentLoaded之後,您正在使用otherpage.php內容填充mainContainer div中的空間。這就是Angular的自動初始化發生的地方。

所以爲了讓它起作用,你必須手動啓動Angular。

這裏有角的文檔看:

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

其他的選項是可用的要好得多,比如在引用您的角度相關的文件(的角度,你的控制器,服務指令,什麼不可以)主頁。

+0

我手動添加'angular.bootstrap',但在我的瀏覽器中沒有結果。如果可能的話,你能幫我一些代碼嗎? –

+0

你真的必須去手動引導路線?我的意思是,這樣做有什麼特別的理由嗎? 如果沒有,嘗試在主網頁的最終參考angular.min.js:

+0

這只是由於設計的原因。它不應該去嗎? –