如何在 ajax 应用程序中加载 Angularjs 应用程序？答案

【问题标题】：How do I load an Angularjs app inside an ajax app?如何在 ajax 应用程序中加载 Angularjs 应用程序？
【发布时间】：2014-05-16 08:11:16
【问题描述】：

我正在尝试在 ajax 页面中加载 angularjs 应用程序的一部分，我已经让它与控制器一起使用，但在使用带有模块的 angularjs 应用程序时遇到了困难

页面

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $("#bt").click(function(){
            $.ajax({
                url: "http://localhost/ajax/ng.php?p=1",
                success: function( data ) {
                    $("#game").html(data);
                }
            });
        });
    });
</script>
</head>
<body>
<input type="button" id="bt" value="poker"></input>

<div id="game">

</div>

</body>

</html>

php

<?php
    if (isset($_GET["p"])){
        header('Access-Control-Allow-Origin: *');
        //echo "<script src=\"http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js\"></script><div ng-app=\"myApp\"><h1 ng-controller='MainCtrl'>{{text}}</h1></div>";
        echo "<div ng-app><h1 ng-controller='MainCtrl'>{{text}}</h1></div><script src=\"http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js\"></script><script src=\"http://localhost/ajax/app.js\">";
    }

?>

JS 文件

var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.text = 'Hello, Angular fanatic.';
}]);

每当我尝试在我的 div 中声明模块名称时，它都不会加载 angular 并且只显示 {{text}}

【问题讨论】：

我不是反对者，但您的问题不清楚。 i've made it work with controllers 你也可以发布它或为此创建一个小提琴jsfiddle.net。您在哪方面需要我们的帮助？
没有人可以帮助您提供这么多信息，请添加一些代码或更多详细信息。
对不起，伙计们第一次问^^

标签： php jquery html ajax angularjs

【解决方案1】：

您没有引导动态添加的 html 代码。不要使用 ng-app，使用

angular.bootstrap(element,["module"]

angular.bootstrap 必须在将 html 添加到元素后调用。另外，为什么不在整个文档上声明 ng-app 并使用 ng-include 或 ngRoute 加载动态部分？

【讨论】：