2

我正在阅读 ui-router 文档。我对我试图用 ui-sref 做的事情有一个不错的感觉。在底部td中,我将 ui-sref 添加到所需的 href。我确保调用我想要触发的状态,括号是我试图创建的路由参数。

问题是我得到了语法错误:令牌'。' 位于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>

这是我的控制器的顶部。我正在使用 controllerAs 并尝试更习惯于 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);
    };    
})();
4

2 回答 2

3

首先,国家应该定义parameter. 它可能是urlparams : {}(或两者)的一部分,但至少有一些......

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

有关更多详细信息,请查看此问答:

如何使用ui-router中的ui-sref将参数传递给控制器

于 2015-09-05T12:23:52.540 回答
1

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

于 2015-09-05T12:27:37.113 回答