Schleichermann Schleichermann - 3 months ago 71
AngularJS Question

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

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

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.