動態獲取數據上的angular.js

您可以在動態獲取數據上使用angular嗎？我有一個現有的應用程序，其中大部分內容是在ajax調用後由javascript呈現的。所以我有這個div是由ajax獲取數據，然後由JavaScript呈現填充。那麼，在所有這些由ajax獲取的大量html中，如果我在這些元素之一上使用ng-app，它似乎不起作用。對初始請求中提取的html元素（在ajax請求之前）執行相同的操作。動態獲取數據上的angular.js

所以這裏是代碼：

文件：test.php的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" ng-app> 
<head> 
<script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="angular.min.js"></script> 
<script type="text/javascript" src="ang_app.js"></script> 
<script> 
    $(document).ready(function() { 
     $.ajax({ 
      url: "test2.php" 
     }).success(function(data) { 
      $('#content').html(data); 
     }); 
    }); 
</script> 
<body> 
<h2>This is an app</h2> 
<div ng-app ng-controller="StatsCtrl2">StatsCtrl2</div> 
<div id="content"></div> 
</body> 
</html>

文件test2.php：

<?php 
echo '<div style="background-color:green;" ng-app ng-controller="StatsCtrl">Should be StatsCtrl</div>';

文件ang_app.js：

function StatsCtrl($scope){ 
alert("function StatsCtrl"); 
} 

function StatsCtrl2($scope){ 
alert("function StatsCtrl2"); 
}

好吧，運行這個應用程序，我看到了人ert爲「StatsCtrl2」。但「StatsCtrl」內的警報從不顯示應用程序。難道我做錯了什麼？

來源

2014-09-05 user3726562

你的問題的簡短答案是肯定的。如果您需要更詳細的幫助，則需要提供一些代碼或許多更多詳細信息。 – Blunderfest 2014-09-05 14:58:39

問題在於數據是由ajax通過執行xmlrpc請求獲取的。數據是作爲純xml返回的。Javascript會通過這些數據並構建html結構。我在代碼的「靜態」部分中添加了angular.js和controller.js，這是初始請求返回的代碼。你的意思是它應該工作。但是，當頁面已經加載（在Ajax請求之前）ng-app將不會被發現，因爲它會出現在xmlrpc請求完成後，並在JavaScript呈現HTML後。你仍然認爲它應該工作？ – user3726562 2014-09-05 15:04:10

添加你的代碼樣本，你將能夠得到更好的答案。 – Blunderfest 2014-09-05 15:09:25

（1）AngularJS運行於$(document).ready。這意味着在AJAX響應來臨時ng-controller="StatsCtrl2"已經綁定到該DIV。（2）正如我在（1）中所說的，AngularJS在DOM準備好的HTML上解析指令。您需要$compile之後注入的HTML。

（3）你加入ng-app和ng-controller內現有ng-app和ng-controller。當你解決所有其他問題時，這很可能會導致更多的問題。

您正在採取一種壞方法。在正常情況下，您只能訪問內置的AngularJS內置東西服務，控制器，指令等等。我指定這一點，因爲解決您的問題。將

$.ajax({ 
     url: "test2.php" 
    }).success(function(data) { 
     $('#content').html(data); 
     $compile($('#content'))($scope); 
    });

但沒有$compile或$scope那裏。這些只存在於AngularJS應用程序中。

您需要使用jQuery停止並開始使用實際AngularJS構建專門爲此設計的：連同$http也許ng-include控制器。然後你不必擔心（2）和（3）。

我再說一遍：AngularJS 不打算用你使用它的方式使用。如果你不知何故黑客你有什麼，並使其工作，你將只會在稍後進一步麻煩。

來源

2014-09-08 08:51:36

謝謝。對不起，但IM不知道我理解你的結論。你說的或多或少的角度工程壞了，當控制器是通過ajax獲取的數據動態創建的？ – user3726562 2014-09-08 08:56:47

AngularJS的工作方式與它的意圖完全一致，沒有什麼_bad_或_good_關於它。它從來沒有打算讓它觀察任何DOM變化和* angularize *他們。如果你需要，那麼你必須自己做。將指令應用於一段HTML的AngularJS方法是內置的$ compile方法：https：//docs.angularjs.org/api/ng/service/$compile – 2014-09-08 09:17:22

動態獲取數據上的angular.js

回答

相關問題