UI-Router: parameter values ​​invalid for state

Question

github repo for this question

Im absolutely hopeless.

I am creating an angular 1.5.8 application that displays nodes on the screen. There are 2 types of nodes - Folders and Pictures.

When clicking on the node image, it should pass the parameters using ui-router, and Im should do as the ui-router docs say.

Interpolation {{picture.url}} and everything else works fine and provides the correct file path.

What is strange, when I do this manually, follow the link: / picture / url it passes the file path.

the error I get: parameter values ​​are not valid for the 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'
        });
     });

<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>

Run code

Any help would be great. Thank you anyway! Eyal

Answer 1

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

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

. http://angular-ui.imtqy.com/ui-router/site/#/api/ui.router.state.directive:ui-sref.