动态 JQuery 中的 Angular.JS答案

【问题标题】：Angular.JS in dynamic JQuery动态 JQuery 中的 Angular.JS
【发布时间】：2014-01-08 03:46:44
【问题描述】：

我再次……我卡住了。我需要在我的项目中使用 Angular.JS，但我无法在动态生成的标签中运行 Angular。

    <h1>Your albums</h1><hr/>
    <div ng-controller="AlbumsController">
        <ul>
            <li ng-repeat="album in albums">
                {{album.name}}
                <p>{{album.desc}}</p>
            </li>
        </ul>
    </div>

这是块，它通过 JQuery 动态生成。

<html ng-app="Application" class="no-js" lang="ru">

这是静态标签，它必须初始化 angular。

我的动态块不起作用。它返回：{{album.name}} {{album.desc}}，这是 未初始化 Angular.JS 的标志 :(

var Juster = angular.module('Juster', []); 
Juster.controller('AlbumsController', function ($scope) {    
    $.post("/index.php/profile_ctrl/myalbums", function(data){ 
        $scope.albums = data; 
    }) 
});

【问题讨论】：

你能告诉我们你的Controller/Js吗？
var Juster = angular.module('Juster', []); Juster.controller('AlbumsController', function ($scope) { $.post("/index.php/profile_ctrl/myalbums", function(data){ $scope.albums = data; }) });所以，html：
Angular 可以处理这个问题。完全放弃使用 JQuery 创建 DOM，它只会给你带来麻烦。
如果您在 AngularJS 上下文之外生成和插入这些元素，您可能需要手动将其 $compile 到 Angular 代码中。这将有助于查看更多代码（尤其是新元素在何处/何时/如何生成和插入）。
看看这个页面上的第二个例子：docs.angularjs.org/api/angular.injector

标签： jquery html angularjs dom

【解决方案1】：

Matt 说在使用 Angular 时大部分情况下需要放弃 jQuery 是正确的。在使用控制器和指令时，它可能会引起一些头痛。

要在您的示例中仅使用 angular，我将使用 $http 服务，如下所示：

Juster.controller('AlbumsController', function ($scope, $http) { 

    $http({method:'GET', url: '/index.php/profile_ctrl/myalbums'})
        .success(function(data, status, headers, config) {
           $scope.albums = data; 
        })
        .error(function(data, status, header, config) {
           // Handle error
        });
});

【讨论】：