Угловая модель данных с неправильными значениями

Question

Я пытаюсь получить данные из YELP - чтобы убедиться, что мой шаблон работает, я привязал модель к контейнеру ng-repeat. Оба метода не работают, что меня смущает, так это то, что я обновляю свой список с помощью $ scope.list, который содержит неверные данные и не связывает их. Используя некоторые из возвращаемых свойств API, также не обновляет представление. Есть предположения?

<div ng-repeat="item in list"> 
     <div class="row"> 
      <div class="col-lg-7 col-md-7"> 
       <a href="#"> 
        <img class="img-responsive" src="http://placehold.it/700x300" alt=""> 
       </a> 
      </div> 

      <div class="col-lg-5 col-md-5"> 
       <h3>{{item.id}}</h3> 
       <h4>Subheading</h4> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.</p> 
       <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> 
      </div> 
     </div> 
    </div> 






var blogAppViewController = angular.module ('blogAppViewController', []); 

blogAppViewController.controller('post_View_Ctrl', function ($scope, $http, $routeParams, $location) { 

    $scope.list = [ 
     {'title': 'Nexus S','name': 'Fast just got faster with Nexus S.','link':"data:wMB"}, 
     {'title': 'Nexus S','name': 'Fast just got faster with Nexus S.','link':"data:wMB"} 
    ]; 

    function getYELP() { 
     return $.ajax({ 
      url: '/getyelp' 
     }); 
    }; 
///// 
///// 
    $.when(getYELP()).done(function(results) { 
     this.yelp_Data = results.businesses; 
     $scope.list = this.yelp_Data; 
     console.log($scope.list); 
    }); 
}); 

Answer 1

Основная проблема, которую я вижу это вы используете запрос JQuery Ajax, который работает за пределами углового $digest цикла.

Поэтому, если вы хотите продолжить использование jQuery (хотя я предлагаю вам воспользоваться услугой $http), вам необходимо позвонить $apply() после изменения значений области, чтобы угловая структура узнала об изменениях.

$.when(getYELP()).done(function (results) { 
    this.yelp_Data = results.businesses; 
    $scope.list = this.yelp_Data; 
    console.log($scope.list); 
    if (!$scope.$$phase && !$scope.$root.$$phase) { 
     $scope.$apply(); 
    } 
}); 

Answer 2

(в серферском голосе) «Не сражайтесь с угловым».

Попробуйте положить свой вызов ajax в сервис, подобный этому.

Контроллер:

.controller('post_View_Ctrl', function ($scope, YelpService) { 
    $scope.list = [ 
     {'title': 'Nexus S','name': 'Fast just got faster with Nexus S.','link':"data:wMB"}, 
     {'title': 'Nexus S','name': 'Fast just got faster with Nexus S.','link':"data:wMB"} 
    ]; 
    $scope.init = function() { 
     function success(value) { 
      $scope.list = angular.copy(value.businesses); 
     } 
     function error(reason) { 
      console.log(reason); 
     } 
     YelpService.get().then(success, error); 
    }; 
    $scope.init(); 
}); 

Услуги:

.factory('YelpService', function($http, $q){ 
    return { 
     get: function() { 
      var deferred = $q.defer(); 
      $http.get('/getYelp') 
       .success(function (value) { 
        deferred.resolve(value); 
       }) 
       .error(function (reason) { 
        deferred.reject(reason); 
       }); 
      return deferred.promise; 
     } 
    }; 
})