AngularJS控制器不显示来自数组的数据

Question

我目前正在Angular中编写一些代码，用于加载一个博客列表到一个网站。我有一个模块和控制器，并有一个ng-repeat循环设置迭代通过json作为一堆html文件的索引。但是，应该从我的索引对象输出数据的标签在最后一页上都是空的。

app.js:

var PersonalApp = angular.module('PersonalApp', [
  'ngRoute',
  'MasterCtrl'
]);
PersonalApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/blog', {
        templateUrl: 'partials/blog.html',
        MasterCtrl: 'MasterCtrl'
      }).
      when('/about', {
        templateUrl: 'partials/about.html',
        MasterCtrl: 'MasterCtrl'
      }).
      when('/projects', {
        templateUrl: 'partials/about.html',
        MasterCtrl: 'MasterCtrl'
      }).
      when('/contact', {
        templateUrl: 'partials/about.html',
        MasterCtrl: 'MasterCtrl'
      }).
      otherwise({
        redirectTo: '/blog'
      });
  }]);

MasterCtrl.js:

var MasterCtrl = angular.module('MasterCtrl', []);
MasterCtrl.controller('MasterCtrl', ['$scope', '$http',
    function ($scope) {
        $.ajax({
            url: '../BlogPosts/posts.json',
            dataType: 'json',
            success: function (bposts) {
                $scope.bposts = (bposts);
                bposts = JSON.stringify(bposts)
                console.log(bposts);
            }
        });
    }]);

blog.html:

<article ng-repeat="posts in bposts" class="post-173 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized masonry-brick" style="position: absolute; left: 0px; top: 0px;">
                <div class="item-sizer">
                    <header class="entry-header blog-entry-header">
                        <div class="entry-data">
                            <span class="posted-on">
                                <a ng-href="/../BlogPosts/{{posts.ID}}" rel="bookmark">
                                    <time class="entry-date published updated" datetime="2015-08-20T02:48:02+00:00">{{posts.ID}}</time>
                                </a>
                            </span>
                        </div>
                        <h1 class="entry-title"><a ng-href="/../BlogPosts/{{posts.ID}}" rel="bookmark">{{posts.Title}}</a></h1> </header><!-- .entry-header -->
                        {[posts.ID}}
                    <div class="entry-content">
                        <p>{{posts.Summary}}<a class="read-more" ng-href="/../BlogPosts/{{posts.ID}}">Continue reading</a></p>
                    </div><!-- .entry-content -->
                </div>
            </article>

---

这是我最初的jQuery的控制台输出:

{"posts":[{
    "ID":"441770384",
    "Title":"TestPost",
    "Summary":"Doot Doot",
    "Thumb":"null"
},{
    "ID":"1441835958",
    "Title":null,
    "Summary":"null",
    "Thumb":"‌​null"
},{
    "ID":"1441836000",
    "Title":null,
    "Summary":"null",
    "Thumb":"null"
},{
    "ID":"14‌​41836039",
    "Title":"dfasdf",
    "Summary":"null",
    "Thumb":"null"
}]}

Answer 1

您似乎正在使用jQuery的.ajax方法而不是$http。使用jQuery不会触发摘要循环，因此，您的作用域更改不会反映在模板中。用$http代替…

只需将"MasterCtrl"控制器更改为

.controller('MasterCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $http.get('../BlogPosts/posts.json').then(function(response) {
            $scope.bposts = response.data.posts;
        });
    }]);

，并尽量避免在Angular应用中使用jQuery。

参见$apply()了解更多关于摘要周期的信息，以及如果您坚持使用第三方库(如jQuery)应该怎么做

Answer 2

因为你正在使用JQuery ($.ajax)检索你的数据，你必须调用$scope.$apply()，这样AngularJS可以创建绑定并更新你的视图。

您可以检查何时使用$scope.$apply()获取更多信息