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

2023-12-05

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

图书馆:

  • 角度 1.3.15
  • 用户界面路由器:0.2.15

导航路径:

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

预期行为:

当导航到/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>

一个工作的笨蛋

这会起作用,但只是与url导航,即href:

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

但这不会——我们不能去abstract state:

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

但基于这个问答:

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

我们可以像这样删除抽象并创建默认状态处理。有更新了笨蛋

// 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',
    url: '/settings',
    ...

核实here

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ui-router 默认子状态不起作用 的相关文章

随机推荐

  • 为什么伪元素上的滤镜渐变在 IE8 中不起作用?

    I want to create buttons like these 在现代浏览器中 效果是使用插入框阴影和滤镜创建的 对于 IE8 选择伪元素 对于 IE7 我使用包含在条件注释中的特殊标签 Demo http jsfiddle net
  • 转义 T-SQL“模式”表达式字符类中的 ] 和 ^ 字符

    我正在尝试模仿 OracleRTRIM expression characters 在 MsSql Server 2008 R2 中使用以下查询 REVERSE SUBSTRING REVERSE field PATINDEX chars
  • 如何在Python中找到pow(a,b,c)的逆序?

    pow a b c python中的运算符返回 a b c 如果我的价值观是b c 以及该操作的结果 res pow a b c 我怎样才能找到值a Despite the statements in the comments this i
  • 如何使用jquery查找并检查树中的所有动态子复选框?

    我已动态地将复选框添加到所有元素 并成功添加了选择所有复选框的功能 但无法选择树结构中的父子复选框 这意味着如果我选择 亚洲 它应该选择所有 东亚 和 南亚 如果我选择东亚 它应该选择所有国家 反之亦然 var json Asia regi
  • 使用 Google Cloud Storage 从 Firebase 存储中删除文件夹

    我想删除文件夹 test 及其中的所有内容 我可以使用以下代码在终端成功删除 FirebaseStorage 中的文件夹及其所有内容 子文件夹 gsutil rm r gs bucketname appspot com test 然而 当我
  • 表格和屏幕阅读器

    我似乎无法让屏幕阅读器阅读简单的表格 我有以下 HTML table alt Account Information tr th Account Number th td 1111 1111 1111 td td nbsp nbsp td
  • 如何删除div中某个div之后的所有元素

    所以我有一个在其底部绘制动态元素的 div 我想隐藏这些元素 无论它们的 ID 使用 javaScript jQuery 是什么 基本上我的 HTML 看起来像这样 div class right panel div class info
  • Ajax:将整数数组发布到 Django

    我在用着数据表 我想让用户选择多行并删除它们 到目前为止 我已经让它工作了 所以它使用下面的代码删除了选择中的第一行 阿贾克斯代码 Add a click handler for the delete row delete click fu
  • Eclipse 中 Tomcat 上 Jersey 的基本完整配置

    我是 Jersey 的新手 正在尝试使用 Tomcat 和 eclipse 建立一个基本的 web 应用程序 我看过许多教程和示例 但它们彼此不同 或者省略了部分过程 例如使用 Spring 使用 web xml 文件 在 Tomcat 上
  • 如何使用 jQuery ajax 获取另一个页面上的 div 的 html?

    我正在使用 jQuery 的 ajax 代码来加载新页面 但希望他只获取 div 的 html 我的代码 HTML div div Script ajax url href type GET success function data co
  • 如何在 Android 中动态切换 XML 样式?

    长话短说 我有一个应用程序 我在其中直接将样式属性应用于活动和片段的 XML 文件 现在我将其重构为styles xml文件 我几乎不敢直接修改主题本身 因为我之前已经尝试过类似的东西 继承变得混乱 所以 我的作品里有好几种这样的风格sty
  • R 子集的回归

    我想对不同国家 即我的数据的子集 运行相同的回归 我确实弄清楚了如何在 R 中执行此操作 但是在 Stata 中更轻松地完成相同的操作之后 我想知道 R 中是否有更好的方法 在 Stata 中你会做这样的事情 foreach country
  • PDF 中的透明图像

    This PDF由多个源代码片段组成 其中五个是包含 Alpha 通道的 PNG 一种是没有 Alpha 通道的 PNG 最后一张是带有透明效果的 Photoshop PDF 这些部件是使用 ABCpdf 9 1 组装的 在 Acrobat
  • 在 CLX TEdit 的 KeyPress 事件中拦截 TAB 键

    我有一个 TEdit VisualCLX 组件 我想覆盖 onKeyPress 事件中 TAB 键的行为 但是如果我尝试拦截 KeyPress 事件中的 TAB 键 它将不起作用 因为当在 TEdit 上按下 Tab 键 如何拦截 TEdi
  • 无法在 centos VPS 上通过 google smtp 发送电子邮件

    我正在尝试通过 google SMTP 发送电子邮件 该代码在我本地 Windows PC 的 tomcat 中运行良好 但我在我的 centos VPS 上遇到了这个错误 org apache commons mail EmailExce
  • 当我删除指针时出现分段错误(核心转储)

    我正在尝试从链接列表中删除重复项 并遇到了一个问题 这可能是显而易见且简单的 但我没有使用过C 多年来 我无法通过阅读类似的问题来找出我做错了什么 下面是我的代码的一部分 我删除了不相关的部分 例如构造函数 其他方法等 template
  • asp.net webapi 2 post参数始终为空

    过去一个小时我一直在试图弄清楚这是我们的 但我不明白它出了什么问题 这篇文章来自我正在编写的 Xamarin 应用程序 使用 RestSharp 便携式客户端 POST http 192 168 30 103 8080 api Order
  • 类型错误:不可散列的类型:'dict',当 dict 用作​​另一个 dict 的键时 [重复]

    这个问题在这里已经有答案了 我有这段代码 for element in json referenceElement keys 当我运行该代码时 我收到此错误 类型错误 不可散列的类型 dict 该错误的原因是什么 我可以采取什么措施来修复它
  • CountIf - 如何转义特殊字符(尖括号)

    我正在尝试使用 VBA 计算 Excel 电子表格中特定单元格值出现的次数 单元格值是一个 XML 标记 函数将尖括号解释为小于 大于 如何逃脱这些字符 微软说 您可以使用通配符 问号 和星号 作为条件 问号匹配任何单个字符 星号匹配任何字
  • ui-router 默认子状态不起作用

    我正在测试UI Router嵌套状态 但我无法在父 子场景中设置默认状态 请帮助 图书馆 角度 1 3 15 用户界面路由器 0 2 15 导航路径 home settings parent state page settings defa