1

私は小さな AngularJS アプリを開発しており、現在サービスの作成に苦労しています。

連絡先 (名前、住所など) を提供するためのバックエンドとして機能するサービスがあります。これまでは、サービスの配列としてハードコーディングされていました ( instance.contacts=[...]) が、json ファイルから読み取ろうとしています。

myModule.factory('contactService', ['$http',function ($http) {
    var instance = {};

    $http.get('contacts.json').success(function (data) {
        instance.contacts = data;
    });

    return instance;
}]);

ファイルが正常に読み取られたことがブラウザ コンソールに表示されますが、画面には何も表示されません。

そこで、代わりに次のことを試してみましたが、うまくいきました：

myModule.factory('contactService', ['$http',function ($http) {
    var instance = {
        contacts:[]
    };

    $http.get('contacts.json').success(function (data) {
        angular.forEach(data, function(item) {
            instance.contacts.push(item);
        });
    });

    return instance;
}]);

最初のコード スニペットではなく、2 番目のコード スニペットが機能する理由がわかりません。誰かが私を理解するのを手伝ってもらえますか?

4

3 に答える 3

4

$http非同期であるため、配列を返すことはできません。配列を返すとき、まだデータが含まれていない可能性があるためです。実際に約束を返す必要があります。

var instance = $http('contacts.json');

return instance;

次に、コントローラー (または別のサービス) で:

contactService.then(function(response) {
  $scope.contacts = response.data;
});

サービスにアクセスする場所に関係なく、 を使用して promise として操作する必要があることを覚えておいてくださいthen。

于 2013-03-01T18:12:33.280 に答える
0

を使用したほうがよいngResource場合があります。その場合、コードは次のようになります。

myModule.factory('contactService', function ($resource) {
    return $resource('contacts.json', {}, {
        get: {method: 'GET', isArray: true}
    });
})

ngResource依存関係のリストにmyModule があることを確認します。次に、コントローラー内でデータにアクセスできますcontactService.get()

于 2013-03-01T18:12:34.400 に答える
0

完全な例を挙げると、プランカーhttp://plnkr.co/edit/VsuAKNavPbHL7RWbrvKD?p=previewがあります。その後のアイデアは、Josh David Miller が言及したものとまったく同じです。

于 2013-03-01T19:21:59.600 に答える