AngularJs ui-router ui-sref not generating href from nested state with parameter

Question

I'm new to angular (and an aspiring junior dev), and I can't get ui-router's ui-sref to generate an href.

The code isn't pretty, but it works without .state('names.new'). I'm getting from .state('names') to .state('names.medals') fine. Everything retrieves and populates via express/mongo smoothly.

The goal is to create an anchor tag with ui-sref that will direct the user to '/#/names/:names/new', which is a simple form.html page.

(Note: This build is heavily based on CodeSchool's tutorial/repo here: https://github.com/codeschool/OlympicsMEAN.)

Here are my states:

"use strict";

var angular =  require('angular');
var uiRouter = require('angular-ui-router');

var app = angular.module('showNames', ["ui.router"]);

app.config(function($stateProvider, $urlRouterProvider){
    //Default page load
    $urlRouterProvider.otherwise('/names');

    //States                            
    $stateProvider
        .state('names', {
            url:'/names',
            templateUrl:'views/namesNav.html',
            resolve: {
              namesProvider: function ($http){
                  return $http.get('/names');
                  }
               },
            controller: 'namesController'
        })

        .state('names.medals', {
            url: '/:names',
            templateUrl: 'views/namesName.html',
            resolve: {
                nameService: function($http, $stateParams){
                    return $http.get('/names/' + $stateParams.names);
                }
            },
            controller: 'athleteController'
        })

        .state('names.new', {
            url: '/:names/new',
            templateUrl: 'views/newMedals.html',
            controller: 'newMedalCtrl'
        })
});

And here are my controllers:

app.controller('namesController', ['namesProvider', '$scope', function(namesProvider, $scope) {    
         $scope.names = namesProvider.data;
}]); 

app.controller('athleteController', ['nameService', '$scope', function(nameService, $scope) {  
         $scope.athlete = nameService.data;
}]);

app.controller('newMedalCtrl', ['$stateParams', '$scope', function($scope, $stateParams) {
      $scope.urlParamVal = $stateParams.names
}]); 

For reference, this .json object is returned from .state('names') 's resolved GET request.

Return object:

   {
    "name": "Michael Phelps",
    "goldMedals": [{
        "Year" : 2012,
        "Event" : "400m-Fly",
        "Location" : "London, England" 
        }, {
        "Year" : 2012,
        "Event" : "200m-Fly",
        "Location" : "London, England" 
        }, {
        "Year" : 2016,
        "Event" : "200m-Breast Stroke",
        "Location" : "Rio de Janeiro, Brazil" 
        }]
    }

Here are my templates:

/views/namesNav.html :

    <ul>        
        <li ng-repeat="name in names">  
//this anchor tag works just fine
        <a ui-sref="names.medals({name : name})"> {{ name }}</a> 
    </li>  
</ul> 

<div ui-view></div>

/views/namesName.html :

<h3>{{athlete.name}}'s Gold Medals</h3>

<table class="table">
    <thead>
        <th> Event    </th>
        <th> Year     </th>
        <th> Location </th>
    </thead>

    <tbody>
        <tr ng-repeat="medal in athlete.goldMedals">
            <td>{{medal.Event}}</td>   
            <td>{{medal.Year}}</td>  
            <td>{{medal.Location}}</td>  
        </tr>
    </tbody> 
</table>


//This isn't generating anything
<a ui-sref="names.new({names : urlParamVal})"> New Medal Form </a>

I hope I've provided everything needed to solve this problem.

Even after reading quite a bit of angular's documentation and walkthroughs, I think I have a fundamental misunderstanding of $scope, controllers, and how properties/services can be passed from one state to another and/or inherited from parent/grandparent states.

If you have resources (articles, courses, videos, tutorials, projects, books) that will help me grow, I'd greatly appreciate them.

Thanks so much for the help!

Answer 1

Add {{}} to ui-sref :

<a ui-sref="names.new({names : {{urlParamVal}}})"> New Medal Form </a>