如何将$ stateParams注入状态解析

angularjs angular-ui-router

143 观看

2回复

27 作者的声誉

我一直在为项目编写一些代码,但是在使用$ 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>
作者: Luca Ciancanelli 的来源 发布者: 2017 年 9 月 15 日

回应 2


1

22329 作者的声誉

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);
      }]
   }
作者: Sachila Ranawaka 发布者: 2017 年 9 月 15 日

0

117 作者的声誉

    .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);
  }]
   } 
   })
作者: P J 发布者: 2017 年 9 月 15 日
32x32