Angular-UI-Router: ui-sref not building href with parameters

Question

I have an HTML page, once loaded in the user's browser the 'list' state is activated and the 'list' partial is pulled by Angular and populated with a list of servers.

Each server has a 'details' link that specifies the 'details' state for that server.

<td><a ui-sref="details({ serverName: '{{server.name}}' })">Details</a></td>

When rendered the 'ui-sref' generates the expected 'href' url based on the route and its optional parameters.

<a ui-sref="details({ serverName: 'SLCMedia' })" href="#/details/SLCMedia">Details</a>

When clicked it works as expected and the 'details' partial is pulled and in the controller assigned to that state pulls the server with the name specified.

The issue I am running into is the fact that once the 'details' partial is loaded, it too has a 'ui-sref' to an 'edit' state.

   <a ui-sref="edit({ serverName: '{{server.name}}' })">
        <button class="btn btn-lg btn-labeled btn-primary">
            <span class="btn-label icon fa fa-edit"></span>
            Edit
        </button>
    </a>

But when this partial is loaded the 'ui-sref' is not generating the correct 'href' url.

   <a ui-sref="edit({ serverName: 'SLCMedia' })" href="#/edit/">
        <button class="btn btn-lg btn-labeled btn-primary">
            <span class="btn-label icon fa fa-edit"></span>
            Edit
        </button>
    </a>

As you can see the 'href' url is '#/edit/' not '#/edit/SLCMedia' as would be expected. It's got to be something simple that I am missing. Does the change of state have something to do with it?

Here are all of defined 'states' for the page.

// Create the Angular App to rule the Server Management Page
var serverApp = angular.module('serverApp', [
    'ui.router',
    'serverControllers',
    'utilitiesService'
]);

serverApp.config(function ($stateProvider, $urlRouterProvider) {
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/list");

    // Now set up the states
    $stateProvider
        .state('list', {
            url: '/list',
            templateUrl: '/views/pages/servers/list.html',
            controller: 'serverListCtrl'
        })
        .state('details', {
            url: '/details/:serverName',
            templateUrl: '/views/pages/servers/details.html',
            controller: 'serverDetailsCtrl'
        })
        .state('create', {
            url: '/create',
            templateUrl: '/views/pages/servers/create.html'
        })
        .state('edit', {
            url: '/edit/:serverName',
            templateUrl: '/views/pages/servers/edit.html',
            controller: 'serverEditCtrl'
        })
});

Here are my controllers

var serverControllers = angular.module('serverControllers', ['utilitiesService']);

serverControllers.controller('serverListCtrl', function ($scope, $http) {
    $http.get('/servers/getList').success(function (data) {
        $scope.serverList = data;
    });
});

serverControllers.controller('serverDetailsCtrl', function ($scope, $stateParams, $http) {
    var serverName = $stateParams.serverName;

    $http.get('/servers/getServerByName/' + serverName).success(function (data) {
        $scope.server = data;
    });
});

serverControllers.controller('serverEditCtrl', function ($scope, $stateParams, $http, $state, showAlertMessage) {
    var serverName = $stateParams.serverName;

    $http.get('/servers/getServerByName/' + serverName).success(function (data) {
        $scope.server = data;
    });

    $scope.server.submitForm = function (item, event) {
        console.log("--> Submitting Server Update");

        //TIMDO: Verify all required fields have been included

        var responsePromise = $http.post("/servers/postEdit", $scope.server, {});
        responsePromise.success(function(dataFromServer, status, headers, config) {
            showAlertMessage({
                type: 'success',
                title: 'Success',
                message: 'Server information updated'
            });

            $state.go('clear');
        });
        responsePromise.error(function(data, status, headers, config) {
            showAlertMessage({
                type: 'error',
                title: 'Success',
                message: 'Server information updated'
            });
        });
    }
});

Answer 1

Hmm, I'm probably misunderstanding your issue but I see at least one obvious difference between the look of your code and the look of mine.

My angular-ui-router links look like this:

<a ui-sref="reps-show({ id: rep.id })">{{rep.name}}</a>

The difference is the absence of braces around rep.id. So I wonder if changing this

<td><a ui-sref="details({ serverName: '{{server.name}}' })">Details</a></td>

to this

<td><a ui-sref="details({ serverName: server.name })">Details</a></td>

might do something for you.

That's probably not it but that's the first thing that came to mind for me.