javascript - 当 url 链接中有参数时，无法从状态 'state1' 解析 'state'

Question

我是 AngularJS 的新手，我正在尝试使用 ui-route。 我制作了一个客户表，当您单击客户购物车时，您可以看到她/他的购物详细信息。 CustomerId 应该作为参数传递给状态。

<a ui-sref="order{{ cust.id }}" class="color-violet"><i class="fa fa-shopping-cart"></i></a>

但我收到错误

Could not resolve 'order1' from state 'home'

这里是代码:customers.html

    <!-- views/customers.html -->
<div class="container">
  <div class="row" ng-cloack>
    <h2>Customers</h2>
    <br>
    <form>
    <div class="form-group">
      <label>Filter</label>
      <input type="text" class="form-control" data-ng-model="customerFilter.name">
    </div>
    </form>
    <br>
    <table class="table table-striped table-hover table-responsive">
      <tr>
        <th>#</th>
        <th ng-click="doSort('name')">Name</th>
        <th ng-click="doSort('city')">City</th>
        <th ng-click="doSort('orderTotal')">Order Total</th>
        <th ng-click="doSort('joined')">Joined</th>
        <th>View Order</th>
      </tr>
      <tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reverse">
        <td>{{$index + 1 }}</td>
        <td>{{cust.name | uppercase}}</td>
        <td>{{cust.city}}</td>
        <td>{{cust.orderTotal | currency}}</td>
        <td>{{cust.joined | date}}</td>
        <td><a ui-sref="order{{ cust.id }}" class="color-violet"><i class="fa fa-shopping-cart"></i></a></td>
      </tr>
    </table>
    <span>Total customers: {{ customers.length}}</span>

</div>

订单.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>

应用程序.js (函数(){

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

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

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

});

}());

和客户的控制者

(function() {

var CustomersController = function ($scope) {
    $scope.sortBy = 'name';
    $scope.reverse = false;

    $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;
    };
};

CustomersController.$inject = ['$scope'];

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

}());

和 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);

}());

一切看起来都很好，但我可以意识到这个错误来自哪里。

谢谢

Answer 1

您必须定义您希望在状态(订单)中使用哪个参数。为此，将状态视为函数，并将所有参数添加为对象:

<a ui-sref="order({ customerId: cust.id })" class="color-violet"><i class="fa fa-shopping-cart"></i></a>