UI-Router: param values not valid for state

Question

the github repo for this question. I'm absolutely hopeless. I create a angular 1.5.8 app, that show nodes on screen. there are 2 types of nodes - Folders and Pictures.

When click on picture node, it should pass the params using ui-router, and Im doing as the ui-router docs says.

Interpolation of {{picture.url}} and everything else work just fine and provide the right path to files.

what is strange is when I'm doing it manually, by go to: /picture/url it is pass the path to file. The error i get is:

Param values not valid for state 'picture'

app.config(function ($stateProvider, $urlRouteProvide) {
           $stateProvider
            .state('picture', {
                url:'/picture/:url',
                template:'<h1> Picture </h1> <br /> <img  class="mainImg" src={{ctrl.pic}} />`',
                controller:function($stateParams) {
                    console.log($stateParams);
                    this.pic = `../img/${$stateParams.url}`
                },
                controllerAs: 'ctrl'
        });
     });

And :

<ul>
  <li class='picture' ng-repeat='picture in home.pictures track by $index'>
    <a ui-sref='picture({ url: {{picture.url}} })'> {{picture.type}} </a>
  </li>
</ul>

Any help will be great. Thanks anyway!

Answer 1

You should be using

ui-sref='picture({ url: picture.url })'

Instead of

ui-sref='picture({ url: {{picture.url}} })'

See http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref for more information and examples.