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

I want to contribute with another datapoint in-case some other folks arrive here with a similar question, as I did.

I was using the non-curly-brace version in my app, and it wasn't working. My specifics involve the InfoWindow in Google Maps. I believe there is a rendering order "issue" such that the data required for the ui-sref link doesn't exist, and when it does finally exist, it's never "re-rendered".

Original (non-working) version:

%h3
  {{window_info.data.user.name || "Mystery Person"}}
%a.fa.fa-info-circle{ ui: { sref: 'users.show({id: window_info.data.user.id })' } }
%pre {{window_info.data.user.id | json}}

Working version:

%h3
  {{window_info.data.user.name || "Mystery Person"}}
%a.fa.fa-info-circle{ ui: { sref: "users.show({id: '{{ window_info.data.user.id }}' })" } }
%pre {{window_info.data.user.id | json}}

I placed the %pre tag with the info to prove to myself that the datum was in-fact present (at least ultimately/eventually), but even still the original code for the link was not working. I adjusted my code to use the interpolated curly-brace version as per the OPs situation and it worked.

Conclusion: Your solution could depend on the way in which the parent component is handling rendering. Google Maps in this case is fairly notorious for being "funky" (technical term) with rendering, particularly in Angu-land.

Answer 2

I created simplified, but working version here. Because there is nothing obviously wrong. This example should at least help you to assure that:

All you are trying to do is supposed to be working.

Here are states:

// States
$stateProvider
      .state('list', { 
          url: "/list",
          templateUrl: 'tpl.list.html',
          controller: 'serverListCtrl',
      })
      .state('edit', {
        url: '/edit/:serverName',
        templateUrl: 'tpl.html',
        controller: 'serverEditCtrl'
    })

Here controller of a list loading data

.controller('serverListCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('server.json').success(function (data) {
        $scope.serverList = data;
    });
}])

(server.json) - example of data

[
  {"name":"abc"},
  {"name":"def"},
  {"name":"xyz"}
]

And the same template:

<li ng-repeat="server in serverList">
    <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 {{server.name}}
        </button>
    </a>
</li>

All is working as expected. Check it here.

Answer 3

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.