不工作的用户界面路由器默认的孩子的状态 [英] ui-router default child state not working

问题描述

我测试 UI-路由器嵌套的状态，但我不能设置父/子方案的默认状态，请帮助。

库：

• 角1.3.15


• UI路由器：0.2.15

导航路径：

  /  - 家
/设置 - 状态父/页
/settings.default  - 孩子1
/settings.mail  -  2儿童
/settings.phone  - 孩子3
 

预期的行为：

导航到 /设置在

，默认的孩子一般状态/页应该触发/加载

实际行为：

如果我设置设置国家abstrat：真正的'，就会出现错误：

 错误：无法过渡到抽象状态设置
    在Object.transitionTo（角-UI-router.js：3143）
    在Object.go（角-UI-router.js：3068）
    在角-UI-router.js：4181
    在angular.js：16299
    在completeOutstandingRequest（angular.js：4924）
    在angular.js：5312
 

如果我删除'abstrat：真正的'，有没有错误，但是当我浏览到/设置，默认状态子/页 - 一般情况不会触发，settings.html显示，但没有加载

app.js：

  angular.module（'测试'，['ui.router'，'sails.io']）//配置路由
的.config（['$ stateProvider'，'$ urlRouterProvider'，'$ locationProvider'，
        功能（$ stateProvider，$ urlRouterProvider，$ locationProvider）{  $ urlRouterProvider.otherwise（'/'）;
  $ locationProvider.html5Mode（真）;  $ stateProvider
    .STATE（'家'，{
        网址：'/'，
        templateUrl：意见/ index.html的，
        控制器：'IndexController中
    }）
    .STATE（设置，{
        摘要：真实，
        网址：/设置
        templateUrl：意见/ settings.html'，
        控制器：'SettingsController
    }）
    .STATE（'settings.general'，{
        网址：''，
        templateUrl：查看/设置/ general.html'，
        控制器：'SettingsController
    }）
    .STATE（'settings.mail'，{
        网址：'/邮件，
        templateUrl：查看/设置/ mail.html'，
        控制器：'SettingsController
    }）
    .STATE（'settings.phone'，{
        网址：'/电话'，
        templateUrl：查看/设置/ phone.html'，
        控制器：'SettingsController
    }）;
}]）;
 

的意见/ settings.html

 ＆LT; D​​IV CLASS =容器＆GT;
  ＆LT; D​​IV CLASS =行＆GT;
    ＆LT; D​​IV CLASS =COL-MD-3＆GT;
      ＆LT; UL类=列表组＆GT;
        ＆LT;李班=列表组项＆GT;＆LT;一个UI的SREF =一般。＆gt;常规＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;李班=列表组项＆GT;＆LT;一个UI的SREF =手机。＆GT;电话和LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;李班=列表组项＆GT;＆LT;一个UI的SREF =邮件。＆GT;邮件和LT; / A＆GT;＆LT; /李＆GT;
      ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =COL-MD-9＆GT;
      ＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

有一个工作plunker

这会工作，但只是网​​址导航，即 的href ：

 ＆LT; A HREF =/设置＆GT; // 将工作
 

但是这不会 - 我们不能去为 摘要 状态：

 ＆LT;一个UI的SREF =设置＆gt;设置＆LT; / A＆GT;
 

不过，在此基础上Q＆放大器;答：

重定向状态AngularJS为默认子状态与UI的路由器

我们可以删除抽象并创建默认状态处理这个样子。有更新plunker

  //重定向引擎
app.run（['$ rootScope'，'$州'，函数（$ rootScope，$州）{    $ rootScope。在$（'$ stateChangeStart'，函数（EVT到，则params）{
      如果（to.redirectTo）{
        。EVT preventDefault（）;
        $ state.go（to.redirectTo，则params）
      }
    }）;
}]）;
 

母公司统计调整：

  .STATE（'设置'，{
    //摘要：真实，
    redirectTo：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

这篇关于不工作的用户界面路由器默认的孩子的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！