angularjs – ui-router默认子状态不起作用

发布时间：2020-12-17 06:53:15 所属栏目：安全来源：网络整理

导读：我正在测试UI-Router嵌套状态,但是我无法在父/子场景中设置默认状态,请帮忙. 库：角1.3.15 ui路由器：0.2.15 导航路径： / - home/settings - parent state/page/settings.default - child 1/settings.mail - child 2/settings.phone - child 3 预期行为：

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

库：

>角1.3.15
> ui路由器：0.2.15

导航路径：

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

预期行为：

导航到/ settings时,应触发/加载默认子级“常规”状态/页面

实际行为：

如果我将’settings’状态设置为’abstrat：true’,则会出现错误：

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

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

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'
    });
}]);

意见/ 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>

解决方法

有 a working plunker

这可行,但只需使用网址导航,即href：

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

但这不会 – 我们不能去抽象状态：

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

但基于这个Q& A：

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

我们可以删除抽象并创建这样的默认状态处理.有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)
      }
    });
}]);

父级统计调整：

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

检查它here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!