angular.js - service中的$http请求正常,但controller里面不能拿到数据
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-15 16:57:48
0
2
593

在自定义的service里面用$http获取本地的json文件的数据。请求能成功,但在controller里面拿不到数据。
打断点的时候,看到数据是空的。页面刷新完却有数据。是什么原因?

自定义service的代码:

blogModule.service('blogData', ['$http', '$q',
    function ($http, $q) {
        var service = {
            returnedData: {},
            dataLoaded: {},
            getData: function (forceRefresh) {
                var dfd = $q.defer();
                if (!service.dataLoaded.genericData || forceRefresh) {
                    $http.get('../app/db.json')
                    .then(function success(data) {
                        angular.copy(data.data, service.returnedData);
                        service.dataLoaded.genericData = true;
                        dfd.resolve(service.returnedData);
                    })
                } else {
                    dfd.resolve(service.returnedData);
                }
                return dfd.promise();
            },
            addSomeData: function (someDataToAdd) {
                $http.post('../app/db.json', someDataToAdd)
                .then(function success(data) {
                    service.getData(true);
                })
            }
        };
        service.getData();
        return service;
    }
]);

controller里面的代码:

blogModule.controller('blogController', ['$scope', '$routeParams', '$location', 'blogData',
    function ($scope, $routeParams, $location, blogData) {
        var getBlogData = blogData.returnedData;
        var titles = $scope.titles = getBlogData.titles;

        console.log(blogData);
        console.log(titles);
    }
]);

需要请求的json数据:

{
    "titles": [
        {
            "title": "入门笔记",
            "source": "_post/入门笔记.html",
            "date": "201512",
            "categories": [
                "笔记",
                "小事记"
            ],
            "tags": [
                "笔记",
                "小事记"
            ]
        },
        {
            "title": "入门笔记2",
            "source": "_post/入门笔记2.html",
            "date": "201512",
            "categories": [
                "基础",
                "日常"
            ],
            "tags": [
                "基础",
                "日常"
            ]
        }
    ]
}

打断点是的console.log

页面重刷完之后是

为什么controller里面拿不到数据?是不是因为异步的原因?

曾经蜡笔没有小新
曾经蜡笔没有小新

全員に返信(2)
给我你的怀抱

非同期呼び出しの問題
service.getData()を実行した後
service.returnedDataの値がまだ空です~~~

また、service.getData() がサービス内で呼び出されるのはなぜですか?
他のモジュールがデータを必要としないときにデータをロードすることに何の意味があるのでしょうか?

いいねを押す +0
曾经蜡笔没有小新

1. サービスコードに記述したサービス名は requestData ですが、コントローラーに記述した名前は blogData です。これが理由かどうかはわかりません。
2. カスタム サービスで $http を使用する場合は、$http とその部分を分離し、コントローラー コード内で順番に呼び出す必要があります。

つまり、コントローラーは少なくとも次のように記述する必要があります:
requestData.getData().then(callback function)

コールバック関数部分をカスタムサービスにカプセル化することをお勧めします

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート