Question

您可以在动态提取数据上使用角度吗？我有一个现有的应用程序，其中大部分内容是在ajax调用后通过javascript呈现的。所以我有这个div通过使用ajax获取数据然后由javascript呈现填充。好吧，在所有这些由ajax提取的html中，如果我在其中一个元素上使用ng-app，它似乎无法工作。使用在初始请求中（在ajax请求之前）获取的html元素执行相同操作。

所以这是代码：

文件：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");
}

好吧，运行这个应用程序，我看到＆＃34; StatsCtrl2＆＃34;的警报。但内部警报＆＃34; StatsCtrl＆＃34;永远不会显示应用我做错了吗？

Answer 1

（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 不打算以你使用它的方式使用。如果你以某种方式 hack 你拥有的东西并让它发挥作用，你将只会在以后遇到进一步的麻烦。

angular.js动态获取数据

1 个答案: