2017-09-15 23 views
0

私はプロジェクトのいくつかのコードで作業していましたが、$ 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; 
} 
    }; 
})(); 

テンプレート(状態を呼び出す1)

<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> 
+0

除去する

変化解決関数からitemidを削除:{のitemId:ヌル}、' –

+0

関数に渡されるパラメータの数が一致しません。 '['MenuDataService、$ stateParams'、function (MenuDataService、itemId、$ stateParams){';関数には3つのパラメータがありますが、配列には2つしかありません。 – Claies

答えて

1

`のparamsは同様にparams``内部この

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

stateParam` `この

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

私はそれを試みましたが、まだ同じエラーが発生しています –

+0

実際には新しいエラーです。 –

+0

エラーを表示する –

0
.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); 
    }] 
    } 
    }) 
関連する問題