防止命中子状态 ui 路由器
Prevent hitting child states ui-router
这是我到目前为止对ui路由器状态的看法:
$stateProvider
.state('tools', {
url: '/tools/:tool',
template: '<div ui-view=""></div>',
abstract: true,
onEnter: function ($stateParams, $state, TOOL_TYPES) {
if (TOOL_TYPES.indexOf($stateParams.tool) === -1) {
$state.go('error');
}
}
})
.state('tools.list', {
url: '',
templateUrl: 'app/tools/tools.tpl.html',
controller: 'ToolsController'
})
.state('tools.view', {
url: '/:id/view',
templateUrl: 'app/tools/partials/tool.tpl.html',
controller: 'ToolController'
});
如您所见,父状态具有参数tool
,该参数只能在数组TOOL_TYPES
中。因此,如果tool
不可用,我想重定向到错误页面。
实际上,一切都按预期工作,但是我收到两个错误:
TypeError: Cannot read property '@' of null
TypeError: Cannot read property '@tools' of null
所以我想,无论如何,儿童州都被"击中"了。有可能防止这种情况吗?或者也许还有其他方法可以实现我想要的?
Angular ui-router 的文档提到,当状态变为活动状态时,onEnter
回调会被调用,因此,子状态被激活。
要解决此问题,您需要实现两件事:
-
创建一个
resolve
,一旦特定条件不适用于该状态,该承诺将返回被拒绝的承诺。确保传递被拒绝的承诺以及有关要重定向到的状态的信息。 -
在
$rootScope
中创建一个$stateChangeError
事件处理程序,并使用第 6 个参数,该参数表示您在被拒绝的承诺中传递的信息。使用该信息创建重定向实现。
演示
爪哇语
angular.module('app', ['ui.router'])
.value('TOOL_TYPES', [
'tool1', 'tool2', 'tool3'
])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('error', {
url: '/error',
template: 'Error!'
})
.state('tools', {
url: '/tools/:tool',
abstract: true,
template: '<ui-view></ui-view>',
resolve: {
tool_type: function($state, $q, $stateParams, TOOL_TYPES) {
var index = TOOL_TYPES.indexOf($stateParams.tool);
if(index === -1) {
return $q.reject({
state: 'error'
});
}
return TOOL_TYPES[index];
}
}
})
.state('tools.list', {
url: '',
template: 'List of Tools',
controller: 'ToolsController'
})
.state('tools.view', {
url: '/:id/view',
template: 'Tool View',
controller: 'ToolController'
});
})
.run(function($rootScope, $state) {
$rootScope.$on('$stateChangeError', function(
event, toState, toStateParams,
fromState, fromStateParams, error) {
if(error && error.state) {
$state.go(error.state, error.params, error.options);
}
});
})
.controller('ToolsController', function() {})
.controller('ToolController', function() {});
相关文章:
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 使用AngularJS中的UI路由器将状态重定向到默认子状态
- 在UI路由器中以抽象状态填充常见视图
- 如何在具有某些 UI 视图的状态中管理工厂单个请求数据
- 带有嵌套状态的Angular ui路由器和后退按钮
- 如何加载嵌套3个状态的UI路由器UI视图模板
- Angular+bootstrap ui,检查当前选项卡是否已处于活动状态
- ui路由器的惰性加载状态
- Angular JS/UI Router:为给定状态禁用指令
- AngularJS UI路由器未进入默认状态
- Angular UI路由器-检查父状态
- 状态更改期间角度UI路由器中的嵌套视图滞后
- angularjs-ui路由器父状态,参数加载在子状态之后
- Angularjs-ui路由器使用不同的参数进入相同的状态
- AngularJS ui路由器状态结构
- Angularjs:ui路由嵌套状态下的绑定不起作用
- 如何将值与$scope绑定,以从定义状态ui路由器的控制器中使用ng模型进行查看
- 防止命中子状态 ui 路由器
- 从服务器加载 html 和控制器并创建动态状态 UI - 路由器
- 如何在vue.js中观察状态/UI的变化