动态获取数据上的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

回答

相关问题