html ui sref,javascript - Angular-UI-Router: ui-sref not building href with parameters - Stack Overf...

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.

Details

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

Details

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.

Edit

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

Edit

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'

});

});

}

});