Question

我一直在为项目编写一些代码，并且遇到了使用$ stateParams的问题。我试图通过一个解决方案将一个项目名称注入我的服务，但它不断提出未定义。我意识到我需要$ stateParams来定义它，但我似乎无法将$ stateParams注入服务中。这是我的代码和错误，提前谢谢。

错误

Uncaught Error: [$injector:modulerr] 
http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=MenuAppX&p1=ReferenceError%3A%20%24stateParams%20is%20not%20defined%0A%20%20%20%20at%20RoutesConfig%20(http%3A%2F%2Flocalhost%3A3000%2Fsrc%2Froutes.js%3A30%3A14)%0A%20%20%20%20at%20Object.invoke%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A44%3A357)%0A%20%20%20%20at%20d%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A42%3A237)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A42%3A376%0A%20%20%20%20at%20p%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20gb%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A46%3A251)%0A%20%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A22%3A332)%0A%20%20%20%20at%20xe%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A21%3A1)
at angular.min.js:7
at angular.min.js:43
at p (angular.min.js:8)
at g (angular.min.js:42)
at gb (angular.min.js:46)
at c (angular.min.js:22)
at Uc (angular.min.js:22)
at xe (angular.min.js:21)
at angular.min.js:333
at HTMLDocument.b (angular.min.js:38)

国家

.state('items', {
    url: '/menuItems/{itemId}',
    templateUrl: 'src/MenuApp/template/items.template.html',
    params: {$stateParams, itemId: null},
    controller: 'itemsXController as itemsX',
    resolve: {
      itemsResult: ['MenuDataService, $stateParams', function 
      (MenuDataService, itemId, $stateParams) {
        return MenuDataService.getItemsForCategory($stateParams.itemId);
      }]
   }
})

服务

(function () {
  'use strict';

  angular.module('data')
  .service('MenuDataService', MenuDataService)
  .constant('categoryBasePath', "https://davids-
restaurant.herokuapp.com/menu_items.json?category=");

  MenuDataService.$inject = ['$http', '$q', '$timeout','categoryBasePath'];
  function MenuDataService($http, $q, $timeout, categoryBasePath) {
var service = this;

service.getAllCategory = function() {
  var deferred = $q.defer();
  var categoriesResult =  $http({
    method: "GET",
    url: ('https://davids-restaurant.herokuapp.com/categories.json'),
  });
  $timeout(function () {
    deferred.resolve(categoriesResult);
  }, 800);
  return deferred.promise;
}
service.getItemsForCategory = function(itemId) {
  var deferred = $q.defer();
  console.log(itemId);
  var itemsResult =  $http({
    method: "GET",
    url: ('https://davids-restaurant.herokuapp.com/menu_items.json?category=L'),
  });
  $timeout(function () {
    deferred.resolve(itemsResult);
  }, 800);
  console.log(deferred.promise);
  return deferred.promise;
}
  };
})();

模板（调用状态的那个）

<a ui-sref="items">This Page works</a>
<ol>
  <li ng-repeat="item in categoriesX.categories"  ui-sref="items({itemId: 
categoriesX.categories[$index].short_name})">
{{ categoriesX.categories[$index].name }}
  </li>
</ol>

Answer 1

从解析功能中删除itemid

更改此

 resolve: {
      itemsResult: ['MenuDataService, $stateParams', function 
      (MenuDataService, itemId, $stateParams) {
        return MenuDataService.getItemsForCategory($stateParams.itemId);
      }]
   }

到这个

 resolve: {
      itemsResult: ['MenuDataService, $stateParams', function 
      (MenuDataService, $stateParams) {
        return MenuDataService.getItemsForCategory($stateParams.itemId);
      }]
   }

Answer 2

    .state('items', {
    url: '/menuItems/{itemId}',
   templateUrl: 'src/MenuApp/template/items.template.html',
   params: { itemId: null},
  controller: 'itemsXController as itemsX',
   resolve: {
  itemsResult: ['MenuDataService, $stateParams', function 
  (MenuDataService, itemId, $stateParams) {
    return MenuDataService.getItemsForCategory($stateParams.itemId);
  }]
   } 
   })

如何将$ stateParams注入状态解析

2 个答案: