Question

我正在研究ui-router文档。对于我试图用ui-sref做的事情，我有一种体面的感觉。在底部 td 我将ui-sref添加到所需的href。我确保打电话给我要开火的州，括号是我试图创建的路线Params。

问题是虽然我得到语法错误：令牌＆＃39;。＆＃39;位于Angular文档的[{4}] 表达式[{3}]的第{2}列。

我确保在我的代码的任何部分中引用了一些其他信息。

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

这是我的控制器的顶部。我正在使用控制器，并试图更多地习惯John Papa风格指南

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>

有关详细信息，请查看此Q＆amp;答：

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

Answer 2

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

在ui-sref中有表达式错误

2 个答案:

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