Контроллер 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's .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; 
     }); 
    }]); 

и стараются избегать использования JQuery в угловых приложениях.

Дополнительную информацию о цикле дайджеста см. В $apply(), если вы настаиваете на использовании сторонних библиотек, таких как jQuery.

Answer 2

Поскольку вы извлекаете данные с помощью JQuery ($ .ajax), вы должны вызывать $ scope. $ Apply(), поэтому AngularJS может создать привязку и обновить ваше представление.

Вы можете проверить When to use $scope.$apply() для получения дополнительной информации.