Question

此处的目标是使用与state参数相同的参数发送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>

Answer 1

你的逻辑似乎很完美，它应该有效。但我认为，当您在解析中发送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;
            }]
        }

Answer 2

如果有人需要解决相同问题的解决方案，您应该知道通过为服务状态创建单独的控制器来解决问题（请参阅下面的评论）。主控制器在其关联状态尚未激活时尝试加载'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('/');
});

$ http和$ stateParams解析$ stateProvider，未知提供程序错误

2 个答案: