Error: Invalid state ref '' , when using ui-sref in angular

Question

I'm using the ui-router for the state transitions and I ran into an issue and not able to resolve it.

When I use ui-sref to go to the child state it gives me this error

Error: Invalid state ref ''

This is my code: user.js (controller):

<a id="sim_'+row.simId+'" title="Click to go to SIM details" ui-sref="app.sims.subscriptions({userId:'+userId+',simId:\''+row.simId+'\'})">

This will get resolved and gets attached to a HTML page.

config.js

.state('app.sims',{
            abstract:'true',
            url:'/sims/:userId/:simId',
            templateUrl:'app/tpl/app/sims.html',
            controller:'SIMsCtrl',
            controllerAs:'vm'
})
.state('app.sims.subscriptions',{
            url:'/subscriptions',
            templateUrl:'app/tpl/app/subscriptions.html',
            controller:'SubscriptionCtrl',
            controllerAs:'vm'
})

sims.js (controller):

vm.simId=$stateParams.simId;
vm.userId=$stateParams.userId;

sims.html

<li>
    <a data-toggle="tab" ui-sref="app.sims.subscriptions" data-target="#" role="tab">Subscriptions<span class="sm-nxt-ln"></span></a>
</li>

subscription.js (controller):

var userId=$scope.$parent.vm.userId;
var simId=$scope.$parent.vm.simId;

I'm getting the values in subscription.js. The userId and the simId is getting resolved but in the console I'm getting the invalid state error.

How can I resolve this. Please help.

Answer 1

I just faced the same issue and realized that, it happens when the ui-sref is set to null

<a ui-sref="">Invalid</a>

check if app.sims.subscriptions in not null