Question

您好我正在尝试使用来自http源的angularjs来显示数据，但是它可以使它工作。到目前为止，这是我的代码：

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不同，其中参数是 {{1在那里你需要response来获取数据。）

所以，一个简单的解决方法是：

response.data

但更重要的是，你应该阅读$q promises。通常，在使用Angular服务，内置或第三方时，这很有用。在这种情况下，您不需要直接使用getTasks: function(callback){ //... $http.get(url).success(function(data){ callback(data); }); }，因为$q已经返回$http - 承诺，但它确实向您展示了如何使用{{1}处理程序而不是传统的回调方法。

所以，我会为$q重写一下你的代码：

.then

并在控制器中：

getTasks

在这个简单的例子中，似乎promises将一种方法替换为一种语法上不同的promises方法，对于这个例子可能也是如此。但是，Promise还有其他advantages，它们与Angular服务的工作方式一致（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; });，$http $timeout和resolve，等...）

角度工厂：如何显示动态数据？

1 个答案: