Question

我有模板bookTemp.html：

<div ng-repeat="book in books">
    <div class="foo" ng-include src="'app/templates/book.html'"></div>
</div>

在我的index.html文件中，我有它的容器div：

<div ng-include src="'app/templates/bookTemp.html'" ng-controller='BookController'></div>

和控制器BookController代码是：

app.controller("BookController", function($scope, $http, $compile){
    $http.defaults.headers.common.Accept = 'application/json';
    var responsePromise = $http.get('http://localhost:8080/books');

    responsePromise.success(function(data, status, headers, config) {
        $scope.books= data;
        //do something
    });
    responsePromise.error(function(data, status, headers, config) {
        alert("AJAX failed!");
    });
}

获取图书＆＃39;使用Ajax请求从服务器获取数据。

Mt问题是：使用＆＃34; books＆＃34;填充模板的最佳做法是什么？数据并将其添加到页面。它的编写方式现在没有显示任何书籍，因为请求是异步的，因此当呈现模板时，没有书籍和＃39; $ scope中的数据，因为请求尚未返回。

我应该编写一个完整的指令来代替＆＃34;加载＆＃34;或者以某种方式使用$ compile在请求成功返回后将其添加到页面中（在它所说的行＃34;做某事＆＃34;）。

我尝试过这样的事情：

var htmlcontent = $('.bookscontainer');
htmlcontent.load('app/templates/bookTemp.html', $scope.articles, someCallback);

还有：

var htmlcontent = $('.bookscontainer');
htmlcontent.load('app/templates/bookTemp.html'
$compile(htmlcontent.contents())($scope);

但它没有用。

感谢。

编辑：非常感谢ExpertSystem。你的代码让我意识到问题是在其他地方。事实证明，＆＃34; src＆＃34;中的不同模板的路径属性是错误的。我已将其更改为前缀为＆＃34;。＆＃34;获取基本网址并在病房后添加完整路径（在应用程序中）。如果有人知道更好的做法，我会很乐意学习。

Angular js将模板添加到页面，并从服务器异步获取数据

0 个答案: