angularjs - AngularJS ui-router - 生成返回当前网址

Question

我是 angularjs 的新手，一直在寻找这个问题的答案，但不幸的是我找不到答案。我知道 angular (1.x) 比较老，但我仍然想学习这个。

继续前进，我正在尝试基于模块控制器内的$scope.menu_item对象动态生成链接。例如，如果

$scope.menu_items = ['Home','Profile','Settings']

数组中的值对应于父状态 User 的子状态，并使用$stateProvider.state()进行配置

$stateProvider
.state('user'{
 url:'/user',
 abstract:true, 
 templateUrl:'someTemplateThatSeemsToWork',
 controller:'MenuCtrl'})
 
//these are the child states
.state('user.Home',{
 url:'/home',
 template:'<p>Home</p>' (this is loaded in the template of its parent)
})
.state('user.Profile',{
 url:'/profile',
 template:'<p>Profile</p>'
})
.state('user.Settings',{
 url:'/settings',
 template:'<p>Settings</p>'
 })

然后在模板中使用 ng-repeat：

<li ng-repeat="menu_item in menu_items">
<a ui-state="user.{{menu_item}}">{{menu_item}}</a>
</li>

正如预期的那样，它正确地呈现了视图，来自$scope.menu_items的值被正确地制作成链接，但标签的 href="" 属性等于当前 url。

默认状态是“user.Home”，因此/user重定向到/user/home (localhost:[port]/user/home)

<a ui-state="user.Home" class="ng-binding" href="/user/home">Home</a>
...
<a ui-state="user.Profile" class="ng-binding" href="/user/home">Profile</a>
...
<a ui-state="user.Settings" class="ng-binding" href="/user/home">Settings</a>

在这里，我们看到所有生成的标签都将 href 值设置为当前 url（localhost:[port]/user/profile 将使其变为 href="/user/profile"）

那么有什么我忘记做的吗？据我了解，当我使用 ui-state 时它应该可以工作，因为它可以处理 $scope 属性。

一些附加说明：

1.) 在地址栏中手动输入指定的状态 url 可以正常工作并呈现正确的模板

2.) 我正在使用 Express 来处理服务器端

3.) 我设置 $locationProvider.html5Mode(true)

临时解决办法

对于可能偶然发现这个问题的人，我暂时使用了一个变通解决方案，只是删除了ui-sref=""或ui-state=""并使用了

ng-href={{state.url}}

和

ng-repeat= "state in states"

在哪里

states = [{name="stateName", url="/relativeToRootUrl"},{..more States}]

我仍然很欣赏使用 ui-sref 的解决方案，因为它更多地使用了 ui-router。

标签： angularjsangular-ui-router