CODEWITHSUNDEEP
angularjs
Basar Sen
Basar Sen

Reputation: 359

Dynamic links and "could not resolve from state" error in AngularJS

I am trying give dynamic link from my models which names are "aracData.planlama".

There is no problem on this. But when I click the link I get "could not resolve from state" error on console. 

 <div class="form-group">
<div class="radio">
    <label>
        <input type="radio" ng-model="aracData.planlama" value="sifirmi">
        Araç satın alınmış durumda
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" ng-model="aracData.planlama" value="satin-alinacak">
        Satın alınması planlanıyor
    </label>
</div>


<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
    <a ui-sref="form.{{aracData.planlama}}" class="btn btn-block btn-info" ng-class="{disabled:aracData.planlama == undefined}">
        Sonraki adım <span class="glyphicon glyphicon-circle-arrow-right"></span>
    </a>
</div>

And theese are my routing codes:

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

$stateProvider

    .state('form', {
        url: '/form',
        templateUrl: 'form.html',
        controller: 'formController'
    })
    .state('form.profile', {
        url: '/profile',
        templateUrl: 'form-profile.html'
    })
    .state('form.interests', {
        url: '/interests',
        templateUrl: 'form-interests.html'
    })
    .state('form.sifirmi', {
        url: '/sifirmi',
        templateUrl: 'sifir-mi-ikinci-el-mi.html'
    })
    .state('form.alindimi', {
        url: '/alindimi',
        templateUrl: 'alindi-mi.html'
    })
    .state('form.payment', {
        url: '/payment',
        templateUrl: 'form-payment.html'
    });
$urlRouterProvider.otherwise('/form/profile');

})

How can I fix this?

Upvotes: 0

Views: 2304

Answers (1)

m59
m59

Reputation: 43755

You can't pass an expression to ui-sref for the state name. Instead, you can do this in the controller.

<a ng-click="go(aracData.planlama)">

Inject the $state service into your controller, then do:

$scope.go = function(sub) {
  $state.go('form.'+sub);
};

This will probably also work:

$scope.go = $state.go; // may need to do $state.go.bind($state);

<a ng-click="go('form'+aracData.planlama)">

Click here for GitHub discussion about dynamic state name for ui-sref.

Upvotes: 1

Related Questions