Angular-UI-Router：ui-sref不使用参数构建href

我有一个HTML页面，一旦加载到用户浏览器中，“列表”状态便被激活，“列表”部分由Angular提取并填充了服务器列表。

每个服务器都有一个“详细信息”链接，用于指定该服务器的“详细信息”状态。

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

渲染后，“ ui-sref”会根据路由及其可选参数生成预期的“ href” URL。

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

单击该按钮后，它将按预期工作，并且“详细信息”部分被拉出，并在分配给该状态的控制器中拉出具有指定名称的服务器。

我遇到的问题是，一旦加载了“详细信息”部分，它也具有“ ui-sref”到“编辑”状态的事实。

   <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>

但是，当加载此部分时，“ ui-sref”不会生成正确的“ 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>

如您所见，“ href” URL是“＃/ edit /”，而不是“＃/ edit / SLCMedia”。我一定缺少一些简单的东西。国家的变化是否与此有关？

这是页面的所有已定义“状态”。

// 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'
        })
});

这是我的控制器

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'
            });
        });
    }
});