AngularJS ui路由器不适用于嵌套视图

我用户ui路由器为我的应用程序。在我的应用程序中，单击用户导航栏将导航到用户列表的屏幕。在这个屏幕上，如果点击用户它将进入用户编辑屏幕，如果点击新用户按钮它将进入添加用户屏幕。我路由他们如下：AngularJS ui路由器不适用于嵌套视图

1. home.html 
<html ng-app="app"> 
<head> 
</head> 
<body> 
<div ng-controller="MainCtrl"> 
    <ul> 

      <li ><a href="#">Home</a></li> 
      <li ><a href="#/user">List Users</a></li>       
      <li ><a href="#/products">List Products</a></li> 

     </ul> 
     </div> 
     <div > 
      <div ui-view></div> 
     </div> 
</div> 
    <script src="angular.js"></script> 
    <script src="angular-ui-router.js"></script> 
</body> 
</html> 


2. app.js 
app.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/user') 
    $stateProvider. 
      state('user', 
        {url: '/user', templateUrl: 'views/user-list.html', controller: UserListController}). 
      state('user.edit', 
        {url: '/user/edit/:userId', templateUrl: 'views/user-edit.html', controller: UserEditController}). 
      state('add', 
        {url: '/user/add', templateUrl: 'views/user-add.html', controller: UserAddController}) 
}); 


3. user-list.html 
<div> 
    <ul> 
    <li ng-repeat="user in userList "> 
     <a href="#/user/edit/{{user.uid}}">{{user.name}}</a> 
    </li> 
    </ul> 
</div> 
<div>  
<a href="#/user/add"><button>New User</button></a> 
</div>

问题引发编辑路线的命名状态。如果我选择名称'user.edit'与'user'部分完全是列表状态的名称，那么单击编辑链接，ui-router不能路由到编辑页面。如果我选择一个没有层级的名称作为'用户'，请说'编辑'或'更改'为编辑状态。另外，在添加路线的情况下，我命名为“添加”，它的工作原理。我错了什么吗？请指教。

来源

2013-07-24 bnguyen82

它看起来像编辑状态的URL可能会导致问题。子状态的URL默认情况下会附加到父状态的URL，但是您使用完整路径。尝试将您的编辑网址更改为“/ edit /：userId”，该网址应自动从用户状态附加到“/ user”。在你现在编辑网址的开头添加一个^符号'^'也应该修复它，但是在你的情况下并没有多大意义。

Appended/Absolute URLs

来源

2013-08-04 03:54:57 alexc

如果要将表达式插入到URL中，则需要使用特殊ng-href属性代替常规href;否则表达式将被字面处理。

来源

2013-07-24 19:24:33 ebohlman

感谢您的回复。我发现它不是URL的问题，因为编辑网址是正确生成的。问题实际上是用状态命名。 – bnguyen82

@ bnguyen82你可以请你发布你的解决方案，或者给出正确的方式来命名你的状态？我认为我面临着类似的问题。谢谢 – Asaf

@Asaf：请参阅alexc的答案。它修复了我的例子的一个错误。但是，我仍然无法让我的例子成功，我成功尝试了另一个例子。 – bnguyen82

AngularJS ui路由器不适用于嵌套视图

回答

相关问题