动态获取的数据上的angular.js

Question

Can you use angular on dynamic fetched data? 您可以对动态提取的数据使用angular吗？ I have an existing application where most of the content is rendered by javascript after ajax-call. 我有一个现有的应用程序，其中大部分内容在ajax调用后由javascript呈现。 So I have this div that is filled by fetching data with ajax and then rendered by javascript. 所以我有这个div，它是通过用ajax提取数据来填充的，然后由javascript呈现。 Well, in all these lot of html that is fetched by ajax, if I use ng-app on one of this elements, it doesnt seem to work. 好吧，在所有这些由ajax提取的html中，如果我在此元素之一上使用ng-app，它似乎不起作用。 Doing the same thing with an html-element that has been fetched in the initial request (prior to the ajax-request) works. 使用在初始请求（ajax请求之前）中获取的html元素执行相同的操作是可行的。

So here is the code: 所以这是代码：

File: test.php 档案：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>

File test2.php: 文件test2.php：

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

File ang_app.js: 文件ang_app.js：

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

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

Well, running this app I see the alert for "StatsCtrl2". 好吧，运行此应用程序，我看到“ StatsCtrl2”的警报。 But the alert inside "StatsCtrl" never shows app. 但是“ StatsCtrl”中的警报从不显示应用程序。 Am I doing something wrong? 难道我做错了什么？

Answer 1

(1) AngularJS runs on $(document).ready . （1）AngularJS在$(document).ready上运行。 That means by the time the AJAX response comes ng-controller="StatsCtrl2" is already bound to that DIV. 这意味着到AJAX响应出现时， ng-controller="StatsCtrl2"已经绑定到该DIV。

(2) As I said in (1), AngularJS parses the directives in your HTML on DOM ready. （2）正如我在（1）中所述，AngularJS在DOM就绪时解析HTML中的指令。 You need to $compile the HTML you are injecting afterwards. 您需要$compile之后要注入的HTML。

(3) You are adding ng-app and ng-controller inside existing ng-app and ng-controller . （3）你正在添加ng-app和ng-controller现有内部 ng-app和ng-controller 。 When you fix all the other issues this will most probably cause some more issues. 解决所有其他问题时，这很可能会引起更多问题。

You are taking a bad approach to this. 您对此采取了不好的方法。 In normal circumstances you only have access to AngularJS built-in stuff inside services, controllers, directives and so on. 通常情况下，您只能访问服务，控制器，指令等内部的 AngularJS内置内容。 I'm specifying this because the solution to your problem would be to 我指定这个是因为解决您的问题的方法是

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

but there's no $compile or $scope there. 但那里没有$compile 或 $scope 。 Those only exist inside the AngularJS Application. 这些仅存在于AngularJS应用程序内。

You need to stop using jQuery and start using actual AngularJS constructs specifically designed for this: a controller together with $http or maybe ng-include . 您需要停止使用jQuery，并开始使用专门为此设计的实际AngularJS结构：与$http或ng-include一起的控制器。 Then you won't have to worry about (2) and (3). 然后，您不必担心（2）和（3）。

I repeat: AngularJS is not intended to be used the way you are using it . 我再说一遍：AngularJS 不能以您使用它的方式使用 。 You will only get into further trouble later on if you somehow hack what you have and make it work. 如果您以某种方式破解并拥有了它，那么以后您只会遇到进一步的麻烦。

动态获取的数据上的angular.js

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-09-08 08:51:36

动态获取的数据上的angular.js

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-09-08 08:51:36

解决方案1
1 已采纳 2014-09-08 08:51:36