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

Question

我有一个HTML页面，一旦在用户的浏览器中加载，'list'状态被激活，'list'部分被Angular拉出并填充了服务器列表。

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

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

渲染时，'ui-sref'会根据路径及其可选参数生成预期的'href'网址。

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

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

我遇到的问题是，一旦加载'细节'部分，它也有一个'ui-sref'到'edit'状态。

   <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'网址。

   <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'网址是'＃/ 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'
            });
        });
    }
});

Answer 1

嗯，我可能误解了你的问题，但我发现你的代码外观和我的外观之间至少有一个明显的区别。

我的angular-ui-router链接看起来像这样：

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

区别在于rep.id周围没有括号。 所以我想知道是否改变这一点

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

对此

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

可能会为你做点什么。

这可能不是它，但这是我想到的第一件事。

Answer 2

我在这里创建了简化但有效的版本 。 因为没有什么明显的错误。 这个例子至少可以帮助你确保：

你所要做的就是应该工作。

以下是各州：

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

这里控制器列表加载数据

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

（server.json） - 数据示例

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

和相同的模板：

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

一切都按预期工作。 在这里查看 。

Answer 3

我想用其他数据点做出贡献，以防其他一些人像我一样带着类似的问题来到这里。

我在我的应用程序中使用非大括号版本，但它无法正常工作。 我的具体内容涉及Google地图中的InfoWindow。 我相信存在渲染顺序“问题”，使得ui-sref链接所需的数据不存在，并且当它最终存在时，它永远不会“重新渲染”。

原始（非工作）版本：

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

工作版本：

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

我将带有信息的%pre标签放在自己身上证明该数据实际存在（至少最终/最终），但即使链接的原始代码仍然无效。 我根据OP的情况调整了我的代码以使用插值的大括号版本并且它有效。

结论：您的解决方案可能取决于父组件处理呈现的方式。 在这种情况下， Google地图因渲染“时髦”（技术术语）而臭名昭着，特别是在Angu-land中。