javascript - AngularJS Controller 不显示数组中的数据

Question

我目前正在 Angular 中编写一些代码，它将博客文章列表加载到网站上。我有一个模块和 Controller ，并设置了一个 ng-repeat 循环来迭代 json，该 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);
            }
        });
    }]);

博客.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 不会触发摘要周期，因此，您的范围更改不会反射(reflect)在模板中。使用 $http 代替...

只需将您的“MasterCtrl” Controller 更改为

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

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

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