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 ...

只需将＆＃34; MasterCtrl＆＃34; 控制器更改为

.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可以创建绑定并更新您的视图。

您可以查看When to use $scope.$apply()了解详情。

AngularJS控制器不显示数组中的数据

2 个答案: