2016-02-28 40 views
0

這裏的目標是發送一個具有相同參數的狀態參數的http請求。然後這將顯示與點擊過的美食類型相關的食物類型。這在理論上是可能的嗎?

"Error: [$injector:unpr] Unknown provider: getFoodsProvider <- getFoods <- AppCtrl" 

JS

var myApp = angular.module('myApp', ['ui.router']); 

myApp.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('home', { 
      url:'/', 
      templateUrl: 'partials/home.html', 
      controller: 'AppCtrl' 
     }) 
     .state('food', { 
      url: '/food/:cuisine', 
      templateUrl: 'partials/food.html', 
      controller: 'AppCtrl', 
      resolve: { 
       getFoods: ['$http', '$stateParams', function($http, $stateParams) { 
        var url = '/getfoods/' + $stateParams.cuisine; 
        return $http.get(url).success(function(response) { 
         return response.data; 
        }) 
       }] 
      } 
     }); 
    $urlRouterProvider.otherwise('/'); 
}); 

myApp.controller('AppCtrl', ['$scope', 'getFoods', function ($scope, getFoods) { 
    $scope.foods= getFoods; 
}]); 

<md-list> 
    <md-list-item ng-repeat="cuisine in cuisines"> 
     <a ui-sref="food({cuisine:cuisine})">{{cuisine}}</a> 
    </md-list-item> 
</md-list> 

食品

<md-list> 
    <md-list-item ng-repeat="food in foods"> 
     <div>{{food}}</div> 
    </md-list-item> 
</md-list> 
+0

爲什麼你是不是在你的控制器寫你的整個業務邏輯。 ? –

+0

如果可能,我想這樣做,因爲據我所知,它可能更乾淨,我想盡可能地將業務邏輯從控制器中取出。 – muninn9

+0

然後嘗試使用'$ q'可能會有所幫助 –

回答

0

在關閉的機會,有人需要解決同樣的問題,你應該知道它是由與該服務創建爲國家單獨的控制器解決(見註釋下面)。當其關聯狀態尚未激活時,主控制器正嘗試加載'getFoods'服務。沒有必要的承諾。另外,我在控制器中的服務之後添加了.data。

新的控制器

var myApp= angular.module('myApp'); 

myApp.controller('foodCtrl', ['$scope', 'getFoods', function ($scope, getFoods) { 

    $scope.foods = getFoods.data; //added .data after service 

}]); 

主要JS

var myApp = angular.module('myApp', ['ui.router']); 

myApp.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('home', { 
      url:'/', 
      templateUrl: 'partials/home.html', 
      controller: 'AppCtrl' 
     }) 
     .state('food', { 
      url: '/food/:cuisine', 
      templateUrl: 'partials/food.html', 
      controller: 'foodCtrl', //specify different controller 
      resolve: { 
       getFoods: ['$http', '$stateParams', function($http, $stateParams) { 
        var url = '/getfoods/' + $stateParams.cuisine; 
        return $http.get(url).success(function(response) { 
         return response.data; 
        }) 
       }] 
      } 
     }); 
    $urlRouterProvider.otherwise('/'); 
}); 
0

你的邏輯看起來很完美,它應該起作用。但是我認爲,當你在解決方案中發送一個Ajax請求並且它異步工作時,你需要在那裏解決。並且不需要使用控制器中的解析值。只需在工廠中設置http響應的數據並使用相同的工廠來獲取控制器中的數據。

那麼試試這個:

resolve: { 
      getFoods: ['$http', '$stateParams','$q','foodData' function($http, $stateParams, $q,foodData) { 
       var url = '/getfoods/' + $stateParams.cuisine, 
       deferred = $q.defer(), 
       $http.get(url).success(function(response) { 
        foodData.setData(response.data); 
        deferred.resolve(); 
       }).error(function(error){ 
        deferred.reject(); 
        $state.go(some other state); 
       }) 
       return deferred.promise; 
      }] 
     } 
+0

不幸的是,我用這種方法得到了同樣的錯誤。 – muninn9

+0

我不確定你爲什麼仍然遇到問題。它在我的代碼中很少用到。由於代碼無法正常工作,請與工廠一起試用。檢查我更新的答案。 – Indra

相關問題