Have a expression error in ui-sref

Question

I am working through the ui-router docs. I have a decent feel for what I am trying to do with ui-sref. In the bottom td I am adding ui-sref to the desired href. I made sure to call the state that I want to fire and the brackets are the route Params that I am trying to create.

the problem is though that I am getting Syntax Error: Token '.' is at column {2} of the expression [{3}] starting at [{4}] from the Angular docs.

I made sure to reference some additional info incase I am missing in any part of my code.

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

Here is the top part of my controller. I am working with controllerAs and trying to get more used to the John Papa style 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;

I am getting back an empty object for $stateParams

My route file is broken up as specific as I could make it. I created a view object, created a main view and referenced it in the html. I made a resolve object that will take the $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;
                }]
            }
    })
};

However, I am just going to the templateUrl I created with no data and the url is not getting the id.

Here is my orders controller

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

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

    }
}());

This is the route that I set up for orders. I made sure to reference :Id each contact 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

Firstly, state should define the parameter. It could be part of url or params : {} (or both), but at least some...

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

Having this, we can create ui-sref like this:

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

For more details check this Q & A:

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

Answer 2

I think one part of the issue is that ctrl.cust.id should just be cust.id