3

サービスからデータをロードし、$q を使用してビューを更新しようとしていますが、うまくいきません。http 呼び出しをコントローラー内に配置すると機能しますが、サービスの一部にすることをお勧めします。

何か助けはありますか？また、約束の代わりにこれを行うより良い方法はありますか?

以下のデモとコード。

---------- Fiddle Demo リンク----------

意見

<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 はこの場合に使用するのに最適ですが、呼び出しが promise を返すため$q、に触れる必要はありません。$http

これを適切に行うには$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 に答える