Question

我有一个主列表页面，当点击每个帖子时，它会导致一个单独的页面，其中包含自己的详细信息。 UI路由器的那部分工作正常。

我还有另一个页面状态，在点击用户名（主页面上的链接以及每个详细信息页面）时，它应该根据userId将用户带到该用户的个人资料页面。

配置文件状态下的代码有什么问题？我已经尝试了许多排列，甚至根据视图@状态结构的空白状态，但它总是跳回到URL.otherwise网址。我读了github状态，但很清楚规则，但不知怎的，我似乎无法弄清楚这一点。这是否意味着我需要2个状态用于2个不同的链接，从而导致相同的个人资料页面视图？

html，用于按ID 链接到用户个人资料

ng-href="#/users/{{ user.profile.uid }}或

ui-sref="tab.posts/users/{{ user.profile.uid }}"。

app.js声明文件

    .state('tab', {
      url: '/tab',
      abstract: true,
      templateUrl: 'templates/tabs.html'
    })

    .state('tab.posts', {
      url: '/posts',
      views: {
        'tab-posts': {
          templateUrl: 'templates/tab-posts.html',
          controller: 'PostsCtrl'
        }
      }
    })

    .state('tab.posts.view', {
      url: '/:postId',     
      views: {
        'tab-posts@tab':{    
          templateUrl: 'templates/tab-showpost.html',
          controller: 'PostViewCtrl'
        }
      }
    })

    .state('tab.profile', {
      url: '/users/:userId',    //tried url = '/:userId', doesnt work
      views: {
        'tab-posts@tab': {          // tried many permutations here too   
          templateUrl: 'templates/profile.html',
          controller: 'ProfileCtrl'
        }
      }
    });

  $urlRouterProvider.otherwise('auth');
});

Answer 1

这应该是正确的锚点：

href：

// instead fo this
// ng-href="#/users/{{ user.profile.uid }}
// we need parent url as well
<a href="#/tab/users/{{ user.profile.uid }}" >

ui-sref：

// this is wrong
// ui-sref="tab.posts/users/{{ user.profile.uid }}"
// it should be almost like $state.go()
<a ui-sref="tab.profile({ userId: user.profile.uid })" >

为什么要进行这些调整？

州 tab.profile 确实从父 tab 继承。因此它必须在第一种情况下包含其URL

在第二种情况下，我们使用ui-sref的方式如下： stateName({param1:value1, param2:value2})

见

ui-sref

将链接（标记）绑定到状态的指令。如果状态具有关联的URL，则该指令将自动生成＆amp;通过$ state.href（）方法更新href属性。单击该链接将触发带有可选参数的状态转换。此外，浏览器本身也会处理中键点击，右键单击和按住Ctrl键单击链接。

用法：


ui-sref='stateName' - 导航到州，没有参数。＆＃39; Statename的＆＃39;可以是任何有效的绝对或相对状态，遵循与$ state.go（）
相同的语法规则
ui-sref='stateName({param: value, param: value})' - 使用参数导航到州。

也许还要查看Q & A

Answer 2

基于此not-wroking plunker，我决定创建新答案并描述如何解决它。

有amended working plunker

这就是我可以将导航调用到州 tab.profile

的状态

ui-sref

<div class="row" ng-repeat="(userId, user) in users">            
  <a ui-sref="tab.profile({userId: userId})">...</a>      
</div>

href

<div class="row" ng-repeat="(userId, user) in users">            
  <a href="#/tab/users/{{userId}}">...</a>
</div>

状态定义主要是在状态 tab.profile 及其＆＃39; tab-posts @ profile＆＃39; view定义我必须使用 'tab-posts' 定位父=== 标签

.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'tabs.html'
})
.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'tab-posts.html',
      controller: 'PostCtrl'
    }
  }
})    
.state('tab.view', { //'tab.posts.view' in local devt
  url: '/posts/:postId',  // /:postId in local devt   
  views: {
    'tab-posts@tab':{  
      templateUrl: 'tab-showpost.html',
      controller: 'PostViewCtrl'
    }
  }
})    
.state('tab.profile', {
  url: '/users/:userId', 
  views: {
    //'tab-posts@profile': { // CORE CHANGE! this must be replaced
    'tab-posts': {           // by this
      templateUrl: 'tab-profile.html',
      controller: 'ProfileCtrl'
    }
  }
});

否则

$urlRouterProvider.otherwise("/tab/posts"); //string in single quotes

还有其他一些内容，只需查看updated plunker

即可

AngularJS UI路由器无法加载具有动态引用的第二页面视图

2 个答案:

ui-sref