ui-sref 有表达式错误

Question

我正在研究 ui-路由器文档。我对我想用 ui-sref 做什么有很好的感觉。在底部 td 我将 ui-sref 添加到所需的 href。我确定调用了我想要触发的状态，方括号是我要创建的路由参数。

问题是我收到了 语法错误：标记 '.'位于表达式 [{3}] 的第 {2} 列，从 [{4}] 开始，来自 Angular 文档。

我确保参考了一些额外的信息，以防我的代码的任何部分遗漏。

 <div class="row" >

  <div class="panel panel-primary">

    <div class="panel-heading">
      Customer List
    </div>

    <div class="panel-body">
      Filter: <input type="text" ng-model="customerFilter">
    </div>

    <table class="table table-striped table-responsive">
      <tr>
        <th ng-click="ctrl.doSort('name')">Name</th>
        <th ng-click="ctrl.doSort('city')">City</th>
        <th ng-click="ctrl.doSort('orderTotal')">order total</th>
        <th ng-click="ctrl.doSort('joined')">joined</th>
        <th>&nbsp;</th>
      </tr>

      <tr data-ng-repeat = "cust in ctrl.customers |filter: customerFilter| orderBy:ctrl.sortBy:ctrl.reverse">
        <td>{{cust.name | uppercase}}</td>
        <td>{{cust.city}}</td>
        <td>{{cust.orderTotal | currency}}</td>
        <td>{{cust.joined |date}}</td>

        <td><a ui-sref="orders({ctrl.cust.id})">View Orders</a></td>
      </tr>

    </table>

  </div>
    <span>Total customers: {{ctrl.customers.length}}</span>

</div>

这是我的控制器的顶部。我正在使用 controllerAs 并尝试更习惯 John Papa 风格 guide

angular
    .module('app.customers')
    .controller('CustomerController', CustomerController);

function CustomerController($stateParams) {
    var vm = this;
// customerId comes from url param
    console.log($stateParams);
    var customerId = $stateParams.customerId;
    vm.orders = null;

我正在为 $stateParams 取回一个空对象

我的路线文件已尽我所能分解。我创建了一个视图对象，创建了一个主视图并在 html 中引用了它。我制作了一个将采用 $stateParams

的解析对象

 angular
    .module('app.customers')
    .config(config);

function config($stateProvider) {
    console.log('customers route')
    $stateProvider
        .state('customers',{
            url:'/customers', 
            views: {
                "main@": {
                    templateUrl: './components/customers/customers.html',
                    controller: 'CustomerController',
                    controllerAs: 'ctrl'
                }
            },
            resolve: {
                customerId: ['$stateParams', function($stateParams) {
                    return $stateParams.customerId;
                }]
            }
    })
};

但是，我只是转到我创建的没有数据的 templateUrl，url 没有获取 ID。

这是我的订单控制器

(function() {
    'use strict';
    angular
        .module('app.orders')
        .controller('OrdersController', OrdersController);

    function OrdersController($stateParams) {
    console.log('in orders');
            var vm = this;
            vm.title = "Customer Orders";

    }
}());

这是我为订单设置的路线。我确保引用 :Id 每个联系人 ID。

(function() {
    'use strict';

    angular
        .module('app.orders')
        .config(config);

    function config($stateProvider) {
        $stateProvider
            .state('orders',{
                url:'/orders:customerId', 
                templateUrl: './components/orders/orders.html',
                controller: 'OrdersController',
                controllerAs: 'ctrl'
        })
        // $locationProvider.html5Mode(false);
    };    
})();

Answer 1

首先，状态应该定义parameter。它可能是 url 或 params : {} （或两者）的一部分，但至少有一些...

// params
.state('customers',{
    url:'/customers', 
    params: { customerId : null }
    ...

// url
.state('customers',{
    url:'/customers/:customerId', 
    ... 

// url & params 
.state('customers',{
    url:'/customers/:customerId', 
    params: { customerId : 1 } // default value
    ...

有了这个，我们可以像这样创建 ui-sref：

// instead of this
<td><a ui-sref="orders({ctrl.cust.id})">View Orders</a></td>
// we need object with name customerId and its value
<td><a ui-sref="orders({customerId: ctrl.cust.id})">View Orders</a></td>

有关详细信息，请查看此问答：

How to pass parameters using ui-sref in ui-router to controller

Answer 2

我认为问题的一部分是 ctrl.cust.id 应该只是 cust.id