UI-路由器和子路由中的可选参数无需重新加载控制器

Question

我的网站有两栏。左边有对话列表，右边有对话详细信息，我想在 UI-Router 中有这样的路由：

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

我试图在 UI-router 中创建分离状态，但它会重新加载整个视图和控制器 - 我只想获取新的 $stateChange 事件而不重新加载控制器..

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

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

当我在 URL 中更改参数时，它不会重新加载整个控制器，但是当我加载例如这个 url /messages/556d6f8e64303702b1000000 我不会在 $stateParams.id 变量中获取 ID..

你能帮帮我吗？

Answer 1

有a working plunker

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

Child 状态有控制器：

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

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

.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

万一我们想跟踪什么是当前活动的 link - 并在 parent 中跟踪它，而活动是 child - 我们内置了支持。

ui-sref-active

有updated plunker

所以这可能是我们的 parent 模板 '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)

A method to determine if the current active state is equal to or is the child of the state stateName. If any params are passed then they will be tested for a match as well. Not all the parameters need to be passed, just the ones you'd like to test for equality.

UI-路由器和子路由中的可选参数无需重新加载控制器

UI-Router and optional parametr in subroute without reloading controller

javascript

angularjs

angular-routing

angular-ui-router

ui-sref-active