UI-Router 的解析函数仅调用一次

2024-01-11

我打算使用 ui-routers 解析功能将一些易于解析的承诺注入到我的控制器中。

我用示例 plnkr 来做一个例子。 考虑这些嵌套状态:route1 and route1.list。 我有一个名为的解析函数abc定义于route1。现在当我导航到route1首次,abc被调用并将被解决。现在当我导航到route1.list然后回到route1, abc不再被调用。

http://plnkr.co/edit/mi5H5HKVAO3J6PCfKSW3?p=preview http://plnkr.co/edit/mi5H5HKVAO3J6PCfKSW3?p=preview

我想这是故意的,但考虑一下这个用例: 解析函数通过 http 检索一些数据,并且应该在某个时刻(也许在每次状态更改时)刷新/失效。使用嵌套状态时有什么方法可以做到这一点吗? 如果在每次注入时调用解析函数,我可以以任何我想要的方式实现它:返回旧的、已解决的承诺或创建一个新的承诺。

我只是简单地测试了这一点,但如果状态没有嵌套,事情就会按我的预期工作。但因为这个而放弃嵌套状态很糟糕。在嵌套状态中提供可用的解析依赖项实际上很好。


提供选项reload:true to go() / transtionTo() / ui-sref有用吗:-) 谢谢Designing the Code为我指明了这个方向。不过解决方案有点不同,所以我写下了这个答案。

重新加载是记录如下 http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.%24state:

reload (v0.2.5) - {boolean=false},如果 true 将强制转换,即使状态或参数没有更改,也称为相同状态的重新加载。它与 reloadOnSearch 不同,因为当您想要在一切都相同(包括搜索参数)时强制重新加载时,您可以使用它。

最直接的方法就是改变每一个ui-sref链接到这样的东西:<a ui-sref="route1" ui-sref-opts="{reload: true}">.

为了避免在每个链接上提供选项,我编写了一个装饰器$state(也可以看看http://plnkr.co/edit/mi5H5HKVAO3J6PCfKSW3?p=preview http://plnkr.co/edit/mi5H5HKVAO3J6PCfKSW3?p=preview):

 myapp.config(function($provide) {
  $provide.decorator('$state', function($delegate) {
    var originalTransitionTo = $delegate.transitionTo;
    $delegate.transitionTo = function(to, toParams, options) {
      return originalTransitionTo(to, toParams, angular.extend({
        reload: true
      }, options));
    };
    return $delegate;
  });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

UI-Router 的解析函数仅调用一次 的相关文章

  • ng-href 中的 AngularJs if 语句

    我有一些动态创建的元素 每个元素都有不同的 ng href 我想根据某些元素给出不同的链接 当我尝试在 ng href 中编写函数时 它会将页面发送到 url 中的函数 因此它不起作用 我尝试做这样的事情 a a 我应该使用哪种方法来创建具
  • 当引导模式打开时如何防止正文内容滚动

    我正在使用 Angular UI Bootstrap模态框 http angular ui github io bootstrap modal 当模式打开时 主体有一个滚动条 当我滚动时 模式后面的内容也会滚动 我可以将溢出 隐藏到正文标记
  • AngularJS - 您可以在不修改其核心源代码的情况下重命名服务吗?

    我遇到过这样的情况 我下载了书面服务angular js 并且它工作得很好 但我更愿意在我的代码中将其称为不同的名称 只是为了方便和可读性 这并不是真正的要求 只是一种愿望 我可以在服务的实际源代码中仔细检查并更改它 但这显然会导致各种问题
  • 测试滚动

    在我的角度应用程序中 我有一个页面 侧面有导航链接 单击该链接时 会将页面向下滚动到匹配的元素 我如何在量角器中为此编写 e2e 测试 有没有类似 抓取第一个可见的 h1 之类的东西 您可以使用 javascript 的 window pa
  • $routeProvider - 为所有路由注入相同的依赖项

    以下代码 routeProvider when page1 控制器 MyController 解析 策略 StrategyOne 在实例化控制器 MyController 之前等待策略依赖关系得到解决 在我的应用程序中 我有一个返回承诺的函
  • Angularjs 切换 div 可见性

    我试图通过单击按钮来切换 div 文本 我尝试采用范围变量并根据该变量切换类名 我在哪里犯了错误here http jsfiddle net nw5ndzrt 340
  • Angularjs ui 路由器。如何重定向到登录页面

    我有4个状态 仪表板 仪表板 main 仪表板 次要 login 仪表板是抽象的 它是 minor 和 main 状态的父状态 下面是我的代码 state dashboard url dashboard abstract true temp
  • 是否可以为 $httpBackend 响应设置通配符?

    假设我在 AngularJS 中有以下测试代码 var someURL var dummyJSON httpBackend whenGET someURL respond dummyJSON 有没有一种方法可以使其成为一组 URL 而不仅仅
  • 用模板替换 ng-include 节点?

    对角度有点陌生 是否有可能replace包含模板内容的 ng include 节点 例如 与 div div src div div 生成的html为 div div src div div
  • AngularJS - 成功返回 $http.post

    我使用 AngularJs 我需要在 http post 连接后返回数据 这是代码 app controller PrincipalController http scope function http scope scope myData
  • 手风琴内的 ui bootstrap datepicker 不可见

    我正在尝试在手风琴内制作一个带有日期选择器的模块 问题是日期选择器弹出框在手风琴上不可见 这是一个显示问题的笨蛋 http plnkr co edit jBqU0LXQFcUuzQLency2 p preview http plnkr co
  • Angular 资源测试:$httpBackend.flush() 导致意外请求

    我想测试 angularjs 资源 use strict AddressService provides functionality to use address resource in easy way This is an exampl
  • 量角器中的“$”选择器

    我见过很多这样的例子 selector 我也在用这个 那么这又是什么 变量确实如此 这是我从量角器得到的docs https angular github io protractor api view ElementFinder proto
  • cookie 未在跨域上设置 - AngularJS 和 NodeJS/Express

    跨域请求时未设置 cookie 我的服务器在 localhost 8000 中运行 客户端在 localhost 9000 中运行 服务器nodejs express上的cors设置是 app use function req res ne
  • 我应该在mean.js中添加模块依赖项(对于ng-sortable)

    我正在尝试将 ng sortable 添加到我的基于mean js 的应用程序中 https github com a5hik ng sortable https github com a5hik ng sortable 按照安装说明并将其
  • Angularjs UI 模态表单

    我曾经使用引导模式有一个登录对话框 scope loginDialog backdrop true keyboard true windowClass modal loginDialog backdropClick true templat
  • 如何测试 AngularJS 指令

    我正在开发一个将使用 AngularJS 的 Rails 3 2 应用程序 我可以让 Angular 做我需要的事情 但我很难弄清楚如何测试我正在做的事情 我正在使用guard jasmine 使用 PhantomJS 运行 Jasmine
  • Angular 1 到 Angular 5(导入嵌套组件)

    Before 角度1 5 用户界面路由器 Now 角5 0 如何在像 Angular 1 5 这样的组件父组件中导入子组件 我从 Angular 5 开始制作教程 Heroes 但没有解释这个过渡 所有组件都导入到 app modole t
  • Typescript:$rootScope 上不存在属性(Angularjs)

    在 Typescript 中向根作用域添加值时出现错误 class TestClass this rootScope ng IRootScopeService constructor rootScope this rootScope roo
  • 如何在 ionic 应用程序中使用 socket.io

    我正在使用 ionic 创建一个应用程序cordova and angular 我必须使用 IP 地址和端口号发出请求 到插座 我读过有关 socket io 的内容 我对如何安装感到困惑套接字 io以及如何与 Angular JS 和 N

随机推荐