AngularJS ui-router：ui-sref 链接在填写 href 值时没有预先添加哈希值答案

【问题标题】：AngularJS ui-router: ui-sref links aren't prepending the hash when filling in href valuesAngularJS ui-router：ui-sref 链接在填写 href 值时没有预先添加哈希值
【发布时间】：2016-03-16 16:17:47
【问题描述】：

我的 ui-router 状态提供程序设置如下：

.state(
    'events', {
        url: '/events',
        templateUrl: ...,
        controller: ...
    })
.state(
    'events.listEvents', {
        url: '/list',
        templateUrl: ...,
        controller: ...
    })
.state(
    'events.eventDetails', {
        url: '/details',
        templateUrl: ...,
        controller: ...
    })

我从events.listEvents 状态开始，所以我的网址如下所示：

https://baseUrl.com/home#/events/list

我在那个页面上有一个这样的链接：

<a ui-sref="events.eventDetails">event details</a>

当我只是正常单击链接时，它可以正常工作并将我引导到带有 URL 的页面：

https://baseUrl.com/home#/events/details

但是当我尝试在新选项卡中打开同一个链接时（或者当我右键单击并复制“href”链接地址时），这是不正确的：

https://baseUrl.com/events/details

那么问题来了：为什么ui-sref填错了href值？为什么它在生成的 URL 中完全缺少 # 哈希？（是的，我已经尝试启用/禁用 $locationProvider.html5mode 并且对此没有任何影响。）

【问题讨论】：

为什么/home?user=jeff 在events.listEvents URL 中？
这只是为了说明应用程序有一个基本 URL（在本例中为/home），随着 ui-router 状态的变化，该基本 URL 保持不变。当您在状态之间切换时，/home 保持不变，只有 # 磅符号之后的内容会发生变化。如果需要，您可以忽略 ?user=jeff - 它是基本 URL 的一部分，因此在您浏览应用程序时它保持不变。
编辑：我在这里清理了我的示例 URL，以便于阅读
我遇到了这个问题，但是升级 ui-router 修复了它，所以我想这是一个修复的错误。

标签： angularjs hash angular-ui-router href ui-sref

【解决方案1】：

我将此添加到我的主要app.js 作为解决方法：

.run(['$state',
    function($state) {
        $state.originalHrefFunction = $state.href;
        $state.href = function href(stateOrName, params, options) {
            var result = $state.originalHrefFunction(stateOrName, params, options);
            if (result && result.slice(0, 1) === '/') {
                return '#' + result;
            } else {
                return result;
            }
        }
    }
])

【讨论】：