угловая фабрика: как отображать динамические данные?

Question

Привет Я пытаюсь отображать данные с помощью angularjs из источника http, но может ли он заставить его работать. Вот мой код до сих пор:

HTML:

<div ng-app="myApp"> 
    <ul ng-controller="ItemsController"> 
    <li ng-repeat="item in items"> 
     <a href="#">{{item.title}}</a> 
    </li> 
    </ul> 
</div> 

JS:

myApp.factory('taskServices', ['$http', 
    function($http) { 
    return { 
     getTasks: function(callback) { 
     var url = 'tasks.cfc?method=list'; 

     $http.get(url).success(function(response) { 
      callback(response.data); 
     }); 
     } 
    } 
    } 
]); 

myApp.controller('ItemsController', ['$scope', 'taskServices', 
    function($scope, taskServices) { 

    $scope.items = []; 
    taskServices.getTasks(function(data) { 
     $scope.items = data; 
    }); 

    } 
]); 

Этот код возвращает следующий JSON: не отображается

[{"id":"1","title":"task 1"}, {"id":"2","title":"task 2"}, ] 

но ничего. Может кто-то указать мне верное направление?

Answer 1

В вашем конкретном случае вы возвращаете undefined в функцию callback. Это происходит потому, что в .success, первый параметр является data, не response (в отличие от .then где параметр являетсяresponse и там вам нужно будет response.data получить данные).

Таким образом, простое исправление:

getTasks: function(callback){ 
    //... 
    $http.get(url).success(function(data){ 
     callback(data); 
    }); 
} 

Но более того, вы должны прочитать о $q promises. Это полезно, в общем, при работе с Угловыми службами, встроенными или сторонними. Вам не нужно фактически использовать $q непосредственно в этом случае, так как $http уже возвращает $q -promise, но он показывает вам, как обещания используются с обработчиками .then вместо традиционного подхода обратного вызова.

Так что, я бы переписать код немного для getTasks:

getTasks: function(){ 
    //... 
    return $http.get(url) // notice the return here 
     .then(function(response){ 
     return response.data; // and here 
     }); 
} 

и в контроллере:

taskServices.getTasks() 
    .then(function(data){  
     $scope.items = data; 
    }); 

В этом простом примере, похоже, обещания заменить один подход для справедливого синтаксически-другой подход к обещаниям, и это может быть справедливо для этого примера. Обещания, тем не менее, есть другие advantages и они присоединяются с тем, как Угловое работ по обслуживанию ($http, $timeout, resolve в ngRoute и ui-router, и т.д ...)