контроллер не загружается для состояния по ui-маршруту

Question

Я использую ui-маршрут для AngularJS для сценария SPA. Краткое описание: есть общая таблица клиентов (состояние штата), которые, щелкнув по знакам корзины, могут видеть данные о заказах клиентов. (Состояние заказа)

У меня есть ссылка, которая предназначена для изменения моего состояния от дома к заказу при передаче некоторых параметров и работает нормально. Я имею в виду страницу заказов, но, видимо, моя информация о заказе не загружается для таблиц.

Может ли кто-нибудь дать мне подсказку о том, как его решить? спасибо файл

orders.html страница

<!-- views/orders.html --> 
<div class="container"> 
    <div class="row" ng-cloack> 
    <h2>Orders</h2> 
    <br> 
    <table class="table table-striped table-hover table-responsive"> 
     <tr> 
     <th>#</th> 
     <th>Product</th> 
     <th >Total</th> 
     </tr> 
     <tr ng-repeat="order in orders"> 
     <td>{{$index + 1 }}</td> 
     <td>{{order.product}}</td> 
     <td>{{order.total | currency}}</td> 
     </tr> 
    </table> 

</div> 

orderController.js

(function() { 

var OrdersController = function ($scope, $stateParams) { 
     // $routeParams.customerId comes from routing configuration customerId after PATH  
    var customerId = $stateParams.customerId; 
    $scope.orders = null; 
    function init() { 
     //Search the customers for the customerId 
     for (var i=0,len=$scope.customers.length;i<len;i++) { 
      if ($scope.customers[i].id === parseInt(customerId)) { 
       $scope.orders = $scope.customers[i].orders; 
       break; 
      } 
     } 
    } 
    $scope.customers = [ 
     {id:1, joined: '2000-12-02', name:'Ali', city:'Montreal', orderTotal: 9.9956, orders: [ {id: 1, product:'Shoes', total: 9.9956}]}, 
     {id:2, joined: '1965-01-25',name:'Zoe', city:'Montreal', orderTotal: 19.99, orders: [{id: 2, product:'Baseball', total: 9.995}, {id: 3, product:'Bat', total: 9.9956}]}, 
     {id:3, joined: '1944-06-15',name:'Tina', city:'Toronto', orderTotal:44.99, orders: [{id: 4, product: 'Headphones', total: 44.99}]}, 
     {id:4, joined: '1995-03-28',name:'Azad', city:'Vancouver', orderTotal:101.50, orders: [{id: 5, product: 'Kindle', total: 101.50}]} 
     ]; 

    $scope.doSort = function(propName) { 
     $scope.sortBy = propName; 
     $scope.reverse = !$scope.reverse; 
    }; 
    init(); 
}; 

OrdersController.$inject = ['$scope', '$routeParams']; 

angular.module('customersApp') 
    .controller('OrdersController', OrdersController); 

}());

и приложение файл модуля находится здесь:

(function() { 

var app = angular.module('customersApp', ['ui.router']); 

app.config(function($stateProvider, $urlRouterProvider){ 

    $urlRouterProvider.otherwise("/") 
    $stateProvider 
     .state('home', 
      { 
       url:'/', 
       controller:'CustomersController', 
       templateUrl:'views/customers.html' 
      }) 
     .state('order',{ 
       url:'/order/:customerId', 
       controller: 'OrdersController', 
       templateUrl:'views/orders.html' 
     }); 

}); 

}());

Answer 1

При использовании ui-router вам следует ввести $stateParams в контроллер вместо $routeParams.

Инъекция $routeParams не выдавала ошибку, потому что у вас есть модуль ngRoute, доступный внутри вашего приложения.

Причина этого вопроса заключается в том, что вы извлекаете параметр из URL-адреса, используя $routeParams, который мы будем пустым в любом случае, так как вы используете ui-router $stateParams, будет иметь эту информацию о параметрах URL.

OrdersController.$inject = ['$scope', '$routeParams']; 

Изменен

OrdersController.$inject = ['$scope', '$stateParams'];