AngularJS UI Router -> Could not resolve when using ui-sref

Question

I have setup a JSON file with my ui-routes in and that works.

But I having trouble using the Link. I have manged to use it when it comes to using the following state:

{
    "name": "home",
    "url": "^/home",
    "abstract": false,
    "parent": "root",
    "views": [{
        "name": "container@",
        "templateUrl": "/pages/home/index.html",
        "controller": "HomeCtrl"
    }]
},

To access this I use:

<a ui-sref="home">Home</a>

And this works perfectly.

But the problem comes when I try and do a 'ui-sref' with parameters. So for example if was to and get to this state:

{
    "name": "approach:module:section",
    "url": "^/approach/:module/:section",
    "controller": "ApproachCtrl",
    "abstract": true,
    "parent": "root",
    "views": [{
        "name": "container@",
        "templateUrl": "/pages/approach/overview.html"
    }]
}

From reading the documentation and other online tutorials I thought the code should now be:

<a ui-sref="approach({module: 'overview', section: '1'})">Approach</a>

This doesn't seem to work. I seem to get the following issue:

Error: Could not resolve 'root.approach' from state 'home'

Where I am going wrong with this?

Thanks, Kane

Answer 1

I am not sure but i think that ui-router is trying to find root.approach but it could not find it maybe as you have named your state as approach:module:section . Try renaming your state to approach