Ui-Router with model data

Question

Ui-Router with model data

Using Angular, Ionic, & UI-Router, I'm trying to change states and pass in data to the State Params. With Angular's built in Ng-Route, this was easy but just creating a link in this manner.

<a href="state2/{{detail.id}}">Brings me to state 2 with detail about this item</a>

But as Ionic has switched to UI-Router, this tends to break the transitions that have been created. I've seen demos where in peoples controllers, the have a click handler that sets up a state change:

      $scope.switchState = function(){
        $state.go('abstract.main'); 

        <a ng-click="switchState">Change States</a>

This works if the nested state is just a static view. But What I want to know is how to properly change states and pass along the parameters to get the data. Any ideas?

javascript
angularjs
ionic-framework

Answer 1

For instance for this state:

.state('test', {
    url: '/test/:id',
    templateUrl: 'insertpathhere.html'
})

In your controller you can navigate like this:

$state.go('test', { id: 420 });

Or you can have something like this in your html:

<a ui-sref="test({id:detail.id})">Click me</a>