ui-router 默认子状态不起作用 [英] ui-router default child state not working

问题描述

我正在测试 UI-Router 嵌套状态，但我无法在父/子场景中设置默认状态，请帮忙.

图书馆:

• 角度 1.3.15
• ui 路由器:0.2.15

导航路径:

/- 主页/settings - 父状态/页面/settings.default - 孩子 1/settings.mail - 孩子 2/settings.phone - 孩子 3

预期行为:

导航到 /settings 时，应触发/加载默认的子常规"状态/页面

实际行为:

如果我设置'settings'状态'abstrat: true'，就会报错:

错误:无法转换到抽象状态设置"在 Object.transitionTo (angular-ui-router.js:3143)在 Object.go (angular-ui-router.js:3068)在 angular-ui-router.js:4181在 angular.js:16299在 completeOutstandingRequest (angular.js:4924)在 angular.js:5312

如果我删除 'abstrat: true'，则没有错误，但是当我导航到/settings 时，默认子状态/页面 - 一般状态未触发，settings.html 显示但未加载

app.js:

angular.module('test',['ui.router','sails.io'])//配置路由.config(['$stateProvider','$urlRouterProvider','$locationProvider',功能($stateProvider，$urlRouterProvider，$locationProvider){$urlRouterProvider.otherwise('/');$locationProvider.html5Mode(true);$stateProvider.state('家', {网址:'/'，templateUrl: 'views/index.html',控制器:'索引控制器'}).state('设置', {摘要:真实，网址:'/设置'，templateUrl: 'views/settings.html',控制器:'设置控制器'}).state('settings.general', {网址:'',templateUrl: 'views/settings/general.html',控制器:'设置控制器'}).state('settings.mail', {网址:'/邮件'，templateUrl: 'views/settings/mail.html',控制器:'设置控制器'}).state('settings.phone', {网址:'/电话'，templateUrl: 'views/settings/phone.html',控制器:'设置控制器'});}]);

views/settings.html

<div class="row"><div class="col-md-3"><ul class="list-group"><li class="list-group-item"><a ui-sref=".general">General</a></li><li class="list-group-item"><a ui-sref=".phone">电话</a></li><li class="list-group-item"><a ui-sref=".mail">Mail</a></li>
<div class="col-md-9"><div ui-view></div>

解决方案

有一个一个工作plunker

这行得通，但只需要 url 导航，即 href:

 //将工作

但这不会——我们不能进入abstract状态:

 settings

但是基于这个 Q &答:

使用 AngularJS 中的 UI-Router 将状态重定向到默认子状态

我们可以像这样删除抽象并创建默认状态处理.有更新的plunker

//重定向引擎app.run(['$rootScope', '$state', function($rootScope, $state) {$rootScope.$on('$stateChangeStart', function(evt, to, params) {如果(to.redirectTo){evt.preventDefault();$state.go(to.redirectTo, params)}});}]);

父属性调整:

.state('设置', {//抽象:真，重定向到:'settings.general'，网址:'/设置'，...

检查它这里

I'm testing UI-Router nested state, but I'm not able to set default state in parent/child scenario, please help.

libraries:

• angular 1.3.15
• ui router: 0.2.15

navigation path:

/ - home
/settings - parent state/page
/settings.default - child 1
/settings.mail - child 2
/settings.phone - child 3

expected behavior:

when navigating to /settings, the default child 'general' state/page should be triggered/loaded

actual behavior:

If I set 'settings' state 'abstrat: true', there will be error:

Error: Cannot transition to abstract state 'settings'
    at Object.transitionTo (angular-ui-router.js:3143)
    at Object.go (angular-ui-router.js:3068)
    at angular-ui-router.js:4181
    at angular.js:16299
    at completeOutstandingRequest (angular.js:4924)
    at angular.js:5312

If I remove 'abstrat: true', there's no error, but when i navigate to /settings, default child state/page - general state not triggered, settings.html displayed but not loaded

app.js:

angular.module('test',['ui.router','sails.io'])     //config routing
.config(['$stateProvider','$urlRouterProvider','$locationProvider',
        function($stateProvider,$urlRouterProvider,$locationProvider) {

  $urlRouterProvider.otherwise('/');    
  $locationProvider.html5Mode(true);

  $stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'views/index.html',
        controller: 'IndexController'
    })
    .state('settings', {
        abstract: true,
        url: '/settings',
        templateUrl: 'views/settings.html',
        controller: 'SettingsController'
    })
    .state('settings.general', {
        url: '',
        templateUrl: 'views/settings/general.html',
        controller: 'SettingsController'
    })
    .state('settings.mail', {
        url: '/mail',
        templateUrl: 'views/settings/mail.html',
        controller: 'SettingsController'
    })
    .state('settings.phone', {
        url: '/phone',
        templateUrl: 'views/settings/phone.html',
        controller: 'SettingsController'
    });
}]);

views/settings.html

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="list-group">
        <li class="list-group-item"><a ui-sref=".general">General</a></li>
        <li class="list-group-item"><a ui-sref=".phone">Phone</a></li>
        <li class="list-group-item"><a ui-sref=".mail">Mail</a></li>
      </ul>
    </div>
    <div class="col-md-9">
      <div ui-view></div>
    </div>
  </div>
</div>

解决方案

There is a working plunker

This would work, but just with url navigation, i.e. href:

  <a href="/settings"> // will work

But this will not - we cannot go to abstract state:

  <a ui-sref="settings">settings</a>

But based on this Q & A:

Redirect a state to default substate with UI-Router in AngularJS

We can remove abstract and create default state handling like this. There is updated plunker

// redirection engine
app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

The parent stat adjustment:

.state('settings', {
    //abstract: true,
    redirectTo: 'settings.general',
    url: '/settings',
    ...

Check it here

这篇关于ui-router 默认子状态不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！