$ routeParams在angularjs中獲取undefined？

Question

我打電話給一個JSON文件的http調用。在第一個控制器中，我得到了類別，而在第二個控制器中，我得到了具有某個ID的類別。

網址用分類標識更新，但$ routeParams顯示爲未定義，不能訪問該文件。

這裏是我的代碼：

$stateProvider.state('categories', { 
    url: '/category', 
    templateUrl: 'templates/categories.html', 
    controller: 'CategoriesCtrl' 
}); 
$stateProvider.state('postC', { 
    url: '/category/:category', 
    templateUrl: 'templates/postsc.html', 
    controller: 'PostCtrl' 
}); 

在控制器我有以下幾點：

angular.module('myapp') 

.controller('CategoriesCtrl', ['$scope', '$http', 
    function($scope, $http) { 
    $http.get("~/wp/v2/terms/category") 
     .then(function(res) { 
     $scope.categories = res.data; 
     }) 
    } 
]) 

.controller('PostCtrl', ['$scope', '$http', '$routeParams', 
    function($scope, $http, $routeParams) { 
    $http.get("~/wp/v2/terms/category/" + $routeParams.category).success(function(res) { 

     $scope.current_category_id = $routeParams.category; 
     console.log($routeParams.category); 
     $scope.pageTitle = 'Posts in ' + res.data.name + ':'; 
     document.querySelector('title').innerHTML = 'Category: ' + res.data.name + ' | AngularJS Demo Theme'; 

     $http.get("~/wp/v2/posts/?filter[category_name]=" + res.data.name).success(function(res) { 
     $scope.posts = res.data; 
     console.log($scope.posts); 
     }) 

    }) 
    } 
]); 

的類別的觀點如下：

<div class="list"> 
    <a ng-repeat="category in categories" href="#/category/{{category.id}}" class="item item-thumbnail-left"> 
    <h2>{{category.name}}</h2> 
    </a> 
</div> 

當我點擊URL變爲的類別：http://localhost:8100/#/category/12，但是$ stateparams.category在~/wp/v2/terms/category/" + $routeParams.category未定義，因此http請求無法通過。

我無法弄清楚我錯過了什麼？

Answer 1

嘗試在每個實例中更改$routeParams與$stateParams。你顯然使用ui-router它使用「國家」，而ngRouter使用「路線」。

angular.module('myapp') 

.controller('CategoriesCtrl', ['$scope', '$http', 
    function($scope, $http) { 
    $http.get("~/wp/v2/terms/category") 
     .then(function(res) { 
     $scope.categories = res.data; 
     }) 
    } 
]) 

.controller('PostCtrl', ['$scope', '$http', '$stateParams', 
    function($scope, $http, $stateParams) { 
    $http.get("~/wp/v2/terms/category/" + $stateParams.category).success(function(res) { 

     $scope.current_category_id = $stateParams.category; 
     console.log($stateParams.category); 
     $scope.pageTitle = 'Posts in ' + res.data.name + ':'; 
     document.querySelector('title').innerHTML = 'Category: ' + res.data.name + ' | AngularJS Demo Theme'; 

     $http.get("~/wp/v2/posts/?filter[category_name]=" + res.data.name).success(function(res) { 
     $scope.posts = res.data; 
     console.log($scope.posts); 
     }) 

    }) 
    } 
]); 

Answer 2

你可能想仔細檢查代碼的旁邊

.controller('PostCtrl', ['$scope','$http','$rootScope', function($scope, $http, $routeParams) 

應該

.controller('PostCtrl', ['$scope','$http','$rootScope', '$routeParams', function($scope, $http, $rootScope, $routeParams) 

更多here上創建一個控制器的語法。你缺少注射器。