javascript - 无需重新加载 Controller 的子路由中的 UI-Router 和可选参数

Question

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

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

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

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

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

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

你能帮帮我吗？

Answer 1

有a working plunker

重点是 - 参数是在子状态上声明的，因此只有子状态 Controller 可以访问它

子状态有 Controller :

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

子 Controller 可以访问为其定义的这些参数:

.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)

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.