3

我正在尝试从服务加载数据并使用 $q 更新视图，但它不起作用。如果我将 http 调用放在控制器中，它会起作用，但我希望它成为服务的一部分。

有什么帮助吗？另外，有没有比承诺更好的方法来做到这一点？

演示和代码如下。

----------小提琴演示链接----------

看法

<div ng-init="getData()">
  <div ng-repeat="item in list">{{item.name}}</div>
</div>

控制器

.controller('ctrl', ['$scope', 'dataservice', '$q', function ($scope, dataservice, $q) {

  $scope.list = dataservice.datalist;

  var loadData = function () {
    dataservice.fakeHttpGetData();
  };

  var setDataToScope = function () {
    $scope.list = dataservice.datalist;
  };

  $scope.getData = function () {
    var defer = $q.defer();
    defer.promise.then(setDataToScope());
    defer.resolve(loadData());
  };

}])

服务

.factory('dataservice', ['$timeout', function ($timeout) {

  // view displays this list at load 
  this.datalist = [{'name': 'alpha'}, {'name': 'bravo'}];

  this.fakeHttpGetData = function () {
    $timeout(function () {

      // view should display this list after 2 seconds
      this.datalist = [{'name': 'charlie'}, {'name': 'delta'}, {'name': 'echo'}];
    },
    2000);
  };

  return this;
}]);
4

2 回答 2

1

首先，不要ng-init以这种方式使用。根据文档：

ngInit 唯一合适的用途是为 ngRepeat 的特殊属性设置别名，如下面的演示所示。除了这种情况，您应该使用控制器而不是 ngInit 来初始化作用域上的值。

其次，在这种情况下，promise 是最完美的选择，但你不需要 touch $q，因为$http调用会为你返回 Promise。

要正确执行此操作，只需$http从服务返回结果：

this.getDataFromService = function() {
    return $http(/* http call info */);
};

然后，在你的控制器内部：

dataservice.getDataFromService().then(function(result){
    $scope.list = result.data;
});

这里还有更新的小提琴：http: //jsfiddle.net/RgwLR/

请记住，这$q.when()只是将给定值包装在一个承诺中（模仿$http您的示例中的响应）。

于 2014-06-19T00:05:00.520 回答
1

不需要 ngInit 或 $q。这就是你应该这样做的方式。

你也不应该暴露dataservice.list给控制器。那应该是私有的dataservice，它将包含大部分逻辑来确定是向控制器发送现有列表还是更新列表然后发送它。

angular.module('app', [])

        .controller('ctrl', ['$scope', 'dataservice', function ($scope, dataservice) {

            loadData();

            function loadData() {
                dataservice.fakeHttpGetData().then(function (result) {
                    $scope.list = result;
                });
            }
        }])

        .factory('dataservice', ['$timeout', function ($timeout) {

            var datalist = [
                {
                    'name': 'alpha'
                },
                {
                    'name': 'bravo'
                }
            ];

            this.fakeHttpGetData = function () {

                return $timeout(function () {

                            // Logic here to determine what the list should be (what combination of new data and the existing list).

                            datalist =  [
                                {
                                    'name': 'charlie'
                                },
                                {
                                    'name': 'delta'
                                },
                                {
                                    'name': 'echo'
                                }
                            ];

                            return datalist;
                        },
                        2000);
            };

            return this;
        }]);
于 2014-06-19T00:06:17.120 回答