AngularJS - 触发控制器时获取先前的路线

2024-02-22

Angular 的内部结构再次让我困惑。

我需要在加载特定视图时确定之前的路线。

我就是这样做的

app.controller('TrashCtrl',function($scope,$rootScope){

    $rootScope.$on('$locationChangeSuccess',function(evt, absNewUrl, absOldUrl) {

        var hashIndex = absOldUrl.indexOf('#');

        var oldRoute = absOldUrl.substr(hashIndex + 2);

        console.log(oldRoute);

    });

});

不幸的是,在逻辑开始工作之前,我必须调用与该控制器对应的视图一次。控制器第一次触发时,不会记录任何内容。此外,在初始加载之后,应用程序将记录everyrouteChange,即使加载的视图无法使用TrashCtrl

我想要这样的:

  • 当视图Trash(其控制器是TrashCtrl)已加载,如果这是第一个路线,我需要上一个路线或空字符串。
  • 如果这仅在实际情况下触发,那就太好了trash路线被调用,而不是在每次路线改变时被调用。

如何实现这一目标?

Edit:

请注意,我知道创建自定义服务并将每个更改写入其中的可能性。这不是我想要的。我只想在需要时才获取数据,例如当Trash叫做。


我尽了一切努力,但似乎没有直接的方法可以访问前一个路线的内部路径$routeProvider https://docs.angularjs.org/api/ngRoute/provider/%24routeProvider's resolve财产。

只是为了好玩,我实现了一个具有以下属性的(极其复杂的)解决方案:

  • 仅当以下情况时,它才会检测先前的路线:/trash视图已加载(并非针对每条路线)。
  • 它不必了解其余路线的任何信息。
  • 添加额外路由时不需要额外配置(这会增加实现复杂性,但简化维护)。

In words

以下是它的工作原理:

In the resolve对象,它为下一个对象注册一个侦听器$routeChangeSuccess event.
捕获事件后,它会取消注册侦听器。
一旦监听器被取消注册,它就会解析一个带有前一个路由路径值的承诺。 注入的对象trashCtrl(来自resolveproperty) 是一个函数,它返回上述承诺。
控制器接收该函数,调用它来获取 Promise,并等待 Promise 通过先前路由的路径得到解析。

简单如馅饼!

Note: For the sake of "simplicity" I haven't taken into account the posibility of an error leading to $routeChangeError (instead of $routeChangeSuccess). One should probably take that into account and deregister the listeners, but even if you don't, there will be no harm - the listener will leave on until the $routeChangeSuccess is fired once.


The code

控制器:

app.controller('trashCtrl', function ($scope, prevRoutePromiseGetter) {
    prevRoutePromiseGetter().then(function (prevRoute) {
        $scope.prevRoute = prevRoute || 'nowhere';
    });
});

The resolve object:

resolve: {
    prevRoutePromiseGetter: function ($q, $rootScope) {
        var deferred = $q.defer();
        var dereg = $rootScope.$on('$routeChangeSuccess', 
            function(evt, next, prev) {
                dereg();
                deferred.resolve((prev.originalPath || '').substr(1));
            }
        );
        return function () {
            return deferred.promise;
        };
    }
}

另请参阅此简短的演示 http://jsfiddle.net/ExpertSystem/tKEs2/.

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

AngularJS - 触发控制器时获取先前的路线 的相关文章

随机推荐

  • 如果 URL 包含单词则隐藏 div

    如果页面的 url 包含某个单词 我需要隐藏一个 div 感谢这个网站 我已经能够成功地找到该网址是否包含该单词 这段代码的工作原理 但由于某种原因 隐藏 div 不起作用 如下所示 div div
  • 如何将 SVG 转换为 png 或 jpg

    我尝试过使用batik 但我得到的是空 png 文件 我还包含了所有必需的罐子 我的代码是 import org apache batik transcoder image PNGTranscoder import org apache b
  • 在 ChartJS 中对标签进行换行时,工具提示中出现不需要的逗号

    我有一些标签很长的图 我使用在此站点中找到的答案将标签换成新行 这是我的标签的示例 labels Utensilios para escrita e artes Faz de conta Jogos Materiais n o estrut
  • Swift 结构到 NSData 并返回

    我有一个包含一个结构体和一个结构体的结构体NSObject我想序列化为NSData object struct Packet var name String var index Int var numberOfPackets Int var
  • 如何在通用标头中 typedef 实现定义的结构?

    我有一个 C 项目 旨在可移植到各种 PC 和嵌入式 平台 应用程序代码将使用具有特定于平台的实现的各种调用 但共享通用 通用 API 以帮助实现可移植性 我正在尝试确定声明函数原型和结构的最合适方法 到目前为止 这是我想到的 main c
  • 关注 MongoDB 变更流

    我们希望我们的 Go 应用程序能够侦听集合上的数据更改 因此 在谷歌搜索解决方案时 我们遇到了 MongoDB改变流 https docs mongodb com v3 6 changeStreams 该链接还展示了 Python Java
  • 如何创建滑动布局,如 Android 主菜单?

    我需要创建一个具有 4 个视图的应用程序 我需要通过触摸并向左或向右移动 无按钮 从一个视图传递到另一个视图 我想要的效果与当您从一个页面传递到另一个页面时在 android 主菜单中导航时看到的效果相同 我已经测试了 ViewFlippe
  • 对瞬态变量注解@Basic

    我有一个 POJO 类 其中包括 持久特性 瞬态特性 在编写 HQL 时 我考虑了两者 持久属性和瞬态属性 IE HQL 类似select persistent properties transient prop from Pojo cla
  • JavaScript 中仅允许数字[重复]

    这个问题在这里已经有答案了 可能的重复 HTML 文本输入仅允许数字输入 https stackoverflow com questions 469357 html text input allow only numeric input 我
  • MySQL Workbench 无法在 Windows 上打开

    我已经下载了 Workbench 的免安装便携式版本 当我运行 exe 文件 在 Windows XP 上 时 没有任何反应 它需要运行一些 MySQL 吗 我认为它是独立的 对吗 我有 MySQL 的 XAMPP 有什么依赖性等吗 您需要
  • Python:tkinter 上的 Z 索引

    是否存在一种方法来指定 Tkinter 画布元素的深度 例如 HTML 的 z index 目前 我发现让元素按照我想要的方式重叠的唯一方法是按特定顺序创建它 问题是某些元素必须在其他元素之后创建 但它们也应该具有较低的 z index 先
  • 重新安装节点后:“找不到模块‘internal/util/types’”

    因此 几个月前我从计算机中删除了节点 我认为主要是 今天我重新安装了它 Node 工作正常 但是当我尝试测试 npm 时 我收到以下消息 npm module js 549 throw err Error Cannot find modul
  • 在 Java 中操作和存储日期的最佳实践是什么? [复制]

    这个问题在这里已经有答案了 操作和存储日期的最佳实践是什么 例如在企业 Java 应用程序中使用 GregorianCalendar 寻求反馈 我会将任何好的答案整合为其他人可以使用的最佳实践 最佳实践通常是准确的NOT考虑重日期对象 但存
  • Spring Security:多个 HTTP 配置不起作用

    我正在尝试使用 Spring Security 并且有一个用例 我希望不同的登录页面和不同的 URL 集得到保护 这是我的配置 Configuration Order 1 public static class ProviderSecuri
  • 如何解决 CALayer 支持的文本中文本渲染不佳的问题

    我有一些可变文本NSTextField呈现在CALayer背景视图 作为一个CALayer不支持其上任何文本的文本渲染的子像素别名 该文本看起来很垃圾 一些谷歌搜索揭示了其原因 并且文本必须渲染到不透明背景上才能启用 SPA 在这种情况下
  • 在 PHP 中发送 HTTP 响应代码的最佳方法

    通过阅读 php 规范和 Stack Overflow 上的其他问题 我可以看到从 PHP 发送 HTTP 响应代码的三种方法 header HTTP 1 0 404 Not Found A B C header false 404 C D
  • JavaScript 有时在 android 的 webview 中不起作用

    我在我的应用程序中放置了一个 webview 来访问包含一些 JavaScript 函数的网页 我的目的是当用户单击网页中的链接时 它将在应用程序中启动一个新的活动 我写了 webSettings setJavaScriptEnabled
  • 如何在实际示例中使用 javascript 模块模式?

    我正在尝试理解 JavaScript 模块模式 我已经看过它应该是什么样子的示例 但我不明白如何使用它 例如 这里发生了一些事情 input share on click function loading html img class re
  • 无论大小如何,如何使项目保持在屏幕中央? [复制]

    这个问题在这里已经有答案了 我试图使这些框在屏幕上水平居中 无论视口的面积是多少 但我似乎无法做到这一点 如果有人可以提供帮助 我将不胜感激 div class jobFields div class field 1 div div cla
  • AngularJS - 触发控制器时获取先前的路线

    Angular 的内部结构再次让我困惑 我需要在加载特定视图时确定之前的路线 我就是这样做的 app controller TrashCtrl function scope rootScope rootScope on locationCh