AngularJs - getting undefined object when passing parameters through ui-sref

Question

Hi I am very new to angularjs and here is my code

html

<table ng-table="tctrl.tableEdit" class="table table-striped table-vmiddle" show-filter="true">
  <tr ng-repeat="w in $data"  ng-class="{ 'active': w.$edit }">
    <td data-title="'Company name'" filter="{ 'cl_company_name': 'text' }" sortable="'cl_company_name'">
      <a ui-sref="clients.client-detail({ clientId: w.cl_id })"><span ng-if="!w.$edit">{{ w.cl_company_name }}</span></a>
      <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.cl_company_name" /></div>
    </td>
  </tr>
</table>

controller.js

.controller('TabsClientCtrl', function ($scope, $window, $stateParams) {

   $scope.clID = $stateParams.clientId
   alert($scope.clID)
})

state.js

.state ('clients', {
    url: '/clients',
    templateUrl: 'views/common.html'
})

.state('clients.client-detail', {
    url: '/client-detail',
    templateUrl: 'views/client-detail.html',
    resolve: {
         ...
    }
})

when I click on company name in td I get alert with undefined. Is that correct way to pass parameters using ui-sref?

what do you have in w and add your state configuaration to the question. — Sravan
– Sravan, Commented Oct 27, 2016 at 6:59

Sravan · Accepted Answer · 2016-10-27 07:10:24Z

1

There are two thing to change in your routes,

1) Add the id parameter to the route url

url: '/client-detail/:clientId',

This :clientId is required to tell ui-router that you are sending some parameter via the route.

2) Add the controller:

controller: 'TabsClientCtrl

The controller is required as you are using those parameters in that controller.

.state ('clients', {
    url: '/clients',
    templateUrl: 'views/common.html'
})

.state('clients.client-detail', {
    url: '/client-detail/:clientId',
    templateUrl: 'views/client-detail.html',
    controller: 'TabsClientCtrl,
    resolve: {
         ...
    }
})

answered Oct 27, 2016 at 7:10

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sravan Over a year ago

but you needed the controlle, or have you given it in the view?

DD77 Over a year ago

Yes it is in the view.

Sravan Over a year ago

okay, if it is in the view, no need of controller in the route.

Vinoth Rajendran · Accepted Answer · 2016-10-27 07:07:50Z

0

Please change your route to

.state('clients.client-detail', {
    url: '/client-detail/?clientId',
    templateUrl: 'views/client-detail.html',
    resolve: {
         ...
    }
})

or

.state('clients.client-detail', {
    url: '/client-detail/:clientId',
    templateUrl: 'views/client-detail.html',
    resolve: {
         ...
    }
})

based on your requirement

answered Oct 27, 2016 at 7:07

Vinoth Rajendran

1,2011 gold badge15 silver badges28 bronze badges

3 Comments

DD77 Over a year ago

Can you tell me the difference between both of them?

Vinoth Rajendran Over a year ago

When using the first approach "clientId" will be optional. For 2nd approach "clientId" should be concatenated with URL

DD77 Over a year ago

Okay got it. Thank You! @Vinoth Rajendran

Collectives™ on Stack Overflow

AngularJs - getting undefined object when passing parameters through ui-sref

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related