Question

我的网站有两列。左侧是会话列表，右侧是会话详细信息，我希望在 UI-Router 中设置路由，如下所示：

/messages - initial route will redirect to first conversation
/messages/:id - this will load conversation list and requested detail

我尝试在UI路由器中创建分离状态，但它重新加载整个视图和控制器 - 我想刚刚获得新的$stateChange事件并且不重新加载控制器..

我实际的半工作解决方案是：

$stateProvider
    .state('messages', {
        url: '/messages',
        templateUrl: 'templates/messages/list.html',
        controller: 'MessagesCtrl'
    })
    .state('messages.root', {
        url: '/:id'
    })

我在更改网址中的参数时没有重新加载整个控制器，但是当我加载例如此网址 /messages/556d6f8e64303702b1000000 时，我将无法获取中的ID $stateParams.id 变量..

你能帮我吗？

Answer 1

有a working plunker

要点是 - 参数是在子状态上声明的，因此只有子状态控制器可以访问它

子州有控制器：

.state('messages', {
    url: '/messages',
    templateUrl: 'templates/messages/list.html',
    controller: 'MessagesCtrl'
})
.state('messages.root', {
    url: '/:id',
    templateUrl: 'tpl.html',
    controller: 'ChildCtrl',
})

子控制器可以访问为它定义的这些参数：

.controller('MessagesCtrl', ['$scope', function ($scope) { 
  console.log("was initated");
}])
.controller('ChildCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) { 
  console.log("child was initated");
  console.log($stateParams.id);
}])

检查here

如果我们想跟踪当前活动链接是什么 - 并在父级中跟踪它，而活动是小孩 - 我们已经建立了支持。

ui-sref-active

有updated plunker

所以这可能是我们的父模板'templates / messages / list.html'内容：

...
<a ui-sref-active="active" ui-sref="messages.root({id:1})">
<a ui-sref-active="active" ui-sref="messages.root({id:'556d6f8e64303702b1000000'})">
<a ui-sref-active="active" ui-sref="messages.root({id:'556d6f8e64303702b1bbbbbb'})">
<a ui-sref-active="active" ui-sref="messages.root({id:'556d6f8e64303702b1xxxxxx'})">

还有其他方法，例如使用$state.includes(stateOrName, params, options)

确定当前活动状态是否等于或是状态stateName的子进程的方法。如果任何参数通过，那么他们也将进行匹配测试。并非所有参数都需要传递，只需要测试相等的参数。

UI-Router和subroute中的可选参数，无需重新加载控制器

1 个答案:

ui-sref-active