Parameter passing in angular ui-router

Question

I have a button that loads the a view using ui router

<button ui-sref="manageactivity.update" >Edit Event</button>

and I would like to pass a {{activity.id}} into the template

app.config(function ($stateProvider, $urlRouterProvider) {

$stateProvider          
    .state('manageactivity.update', {
        url: '/update/:id',
        templateUrl: "update.html",
        controller: 'eventMgmtCtrl'     
    }); 
});

app.controller("eventMgmtCtrl", function ($scope,$stateParams) {
    $scope.testID = $stateParams.id;    
});

I do know how to do it in normal angular routing, by passing it through the url as such, but it does not work for ui router because ui-router uses the name of the state instead of the url?

<button data-ng-href="#Update/{{activity.id}}" >Edit Event</button>

What changes do I need ?

pritesh · Accepted Answer · 2016-06-04 06:27:42Z

4

You can pass data in ui-sref as

<button ui-sref="manageactivity.update({id: activity.id})" >Edit Event</button>

And you can access it in the page using the $stateParams as you defined in the question...Good Luck

answered Jun 4, 2016 at 6:27

pritesh

2,20222 silver badges26 bronze badges

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

Comments

BHUVNESH KUMAR · Accepted Answer · 2016-06-04 07:12:43Z

3

You can pass data in "ui-sref" as following way:

HTML:-

<button ui-sref="manageactivity.update({'id':'activity.id'})" >Edit Event</button>

Than you can receive data in controller as following way:-

Controller:-

 $scope.id = $stateParams.id;

answered Jun 4, 2016 at 7:12

BHUVNESH KUMAR

4015 silver badges15 bronze badges

Collectives™ on Stack Overflow

Parameter passing in angular ui-router

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related