2017-06-02 61 views
0

在此循環中,希望得到任何幫助。嘗試從服務中的api提取數據到我的控制器中,並以ng-repeat重複返回的數據。將數據從服務返回給控制器

已經試圖用混合結果進行處理。

方法1:

app.factory('getServiceData',function($http){ 
var getPosts = function(){ 
    return $http.get("http://localhost:3000/posts") 
    .then(function(response){ 
     console.log(response.data) 
     return response.data 
    }) 
} 

控制器

app.controller('myCtrl',['getServiceData','$scope','$http', 
function($scope,$http,getServiceData){ 

getServiceData.getPosts().then(function(data){ 
    $scope.posts = data; 
}).catch(function(){ 
    $scope.error ='unable to get posts'; 
}); 

我的控制檯將返回 「供應商 'getServiceData' 必須返回一個值從$獲得工廠方法。」所以我的承諾沒有返回我可以使用的get值,但不知道如何重構。

方法2時使用的ngRoutes解決用戶導航到頁面

方法2前拉API數據:

app.factory('getServiceData',function($http){ 

return { 
    var getPosts = function(){ 
    return $http.get("http://localhost:3000/posts") 
.then(function(response){ 
    console.log(response.data) 

return response.data 
    }) 
} 
}; 

配置:

.when('/home.html', { 
     templateUrl: 'app/home.html', 
     controller: 'myCtrl', 
     resolve: { 
     'ServiceData': function(getServiceData){ 
      return getServiceData.getPosts(); 
      } 
      } 

    }) 

第二種方法將從console.log響應中的api返回數據,但我無法在控制器中顯示它。

回答

0

重構你的方法#1
的第一個問題是你service以及它是如何編碼。
第二個問題是您的控制器的依賴注入順序。

//Service 
app.factory('getServiceData', getServiceData); 
getServiceData.$inject = ['$http']; 
function getServiceData($http) { 
    return { 
    getPosts:() => $http.get('http://localhost:3000/posts') 
    } 
}); 

// Controller 
app.controller('myCtr', myCtrl); 
myCtrl.$inject = ['getServiceData', '$scope']; 
function myCtrl(getServiceData,$scope) { 
    getServiceData.getPosts().then(function(data){ 
    $scope.posts = data; 
    }).catch(function(){ 
    $scope.error ='unable to get posts'; 
    }); 
} 

有用的參考資料:

AngularJS: Factory vs Service vs Provider

Dependency Injection

+0

這就是它。我按照錯誤的順序列出了我的依賴項。謝謝!! –

0

方法1應該是這樣的:

它應該返回getPosts對象的控制器來理解,因此錯誤「供應商‘getServiceData’必須返回一個值從$獲得工廠方法。」將得到解決。

app.factory('getServiceData',function($http) { 
    var getServiceDataFactory = {}; 
    var _getPosts = function() { 
     return $http.get("http://localhost:3000/posts") 
        .then(function(response){ 
         console.log(response.data); 
         return response.data; 
        }); 
    } 

    getServiceDataFactory.getPosts = _getPosts; 
    return getServiceDataFactory; 
}); 
2

您不需要在工廠解決承諾,因爲您將其重新安裝在控制器中。只需在工廠返回http並在控制器中解析即可。

而且,返回終點在工廠

app.factory('getServiceData',function($http){ 
    var getPosts = function(){ 
     return $http.get("http://localhost:3000/posts") 
    } 
    return { 
     getPosts : getPosts 
    } 

}) 
+0

試過這樣做,但我得到一個回報getServiceData.getPosts不是一個函數。仍然是新的角度和服務 –

1

應該是這樣到該對象。

app.factory('getServiceData', function($http){ 
    return { 
    getPosts : function() { 
     return $http.get("http://localhost:3000/posts") 
     } 
    }; 
}); 
相關問題