AngularJS 锚点点击第二次不起作用

2024-01-27

这是我的Demo http://plnkr.co/edit/GArzH9gTQCd0r53WhuWO?p=preview

app.run(function($rootScope, $location, $anchorScroll) {
      //when the route is changed scroll to the proper element.
      $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
        console.log("called routeChangeSuccess");
        if ($location.hash()) $anchorScroll();
      });
    });
  1. 点击转到一个的末尾它将导航到带有 id 的 div
  2. 第二次点击同一个链接,它不会做任何事情

我做错了什么?或者这与角度有关?

注意:对此的破解方法是使用点击事件,这应该可以工作,正在寻找直接的解决方案

使用角度和路线版本1.5.5

*添加赏金


我检查了你的 plunkr,我注意到你没有指定路线,当给出锚标记时,因此当我将特定行更改为此时,不会触发“$routeChangeSuccess”

<a href="/one/#one"> go to end of one </a>

我锚定滚动工作正常。

解决方案: Plunkr http://plnkr.co/edit/keO12ymQfATuxUiabJ7U?p=preview

请注意HTML5模式在路由方面的挑战,here https://stackoverflow.com/questions/16569841/reloading-the-page-gives-wrong-get-request-with-angularjs-html5-mode,如果您还没有考虑到这一点。

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

AngularJS 锚点点击第二次不起作用 的相关文章

  • 如何触发UI-Router View Load事件?

    第一次测试 ui router 但目前测试事件 我似乎无法理解如何触发 viewContentLoaded 或 Loading 虽然 我已经有 stageChangeSuccess 等工作了 我只是把一切都推到了http punkbit c
  • JSON 数据的动态表单(不同类型)

    我尝试使用 JSON 中的数据在 AngularJS 中创建动态表单 我有这个工作 HTML p p
  • TypeScript AngularJS 组件模态 - this.$modalInstance.dismiss 不是一个函数?

    我已将其中一个用户数据输入表单转换为 uib 模式 但是当我尝试从 取消 按钮关闭模式时 出现以下错误 this modalInstance dismiss is not a function 同样的事情是如果使用this modalIns
  • 使用 angularjs 为多选下拉列表分配默认值

    我正在使用这个插件http dotansimha github io angularjs dropdown multiselect http dotansimha github io angularjs dropdown multisele
  • 如何重置表单中的 $dirty

    我在使用时遇到一个问题 dirty在我的申请表中 问题是一旦您更改表单字段 值 dirty将被设置为true但现在当您撤消更改时 它不会重置 dirty价值false 我们可以重置 dirty价值false手动但之后当您再次更改表单字段值时
  • 如何并排展开和折叠三个div?

    document ready function toggle click function if this data name show sidebar animate width 10 hide map animate width 89
  • Angular UI bootstrap 手风琴 - 展开创建可滚动和页面“跳转”

    我正在使用 Angular ui 引导手风琴 一切都很好 除了当我展开一个足够大的手风琴部分时 浏览器会显示页面的滚动条 整个页面会向左摇动滚动条的宽度 当手风琴足够小以至于不需要滚动条时 页面会恢复到原始大小 我不知道该怎么办 这是否需要
  • 将安全的 Grafana 嵌入到 Web 应用程序中

    我想使用 AngularJS 将 Grafana 嵌入到我的 Web 应用程序中 目标是 当用户使用我的应用程序时 她应该能够单击按钮并加载 Grafana UI 就其本身而言 这是一项简单的任务 为此 我使用 apache 代理 Graf
  • 添加甜蜜警报 Angular js

    我是 AngularJS 的新手 我正在尝试使用来自https github com oitozero ngSweetAlert https github com oitozero ngSweetAlert 我已经将相应的脚本添加到我的in
  • 将行推入使用 ng-repeat 以角度呈现的表格中

    当客户端单击该行时 我想在表中插入额外的行 不应预取数据 因为我预计最多有 30 行 但每行都有关联的数据 在一次获取中获取这些数据是不合理的 到目前为止 我的方法是使用 ng repeat 迭代我的集合并渲染表格 当客户端按下该行时 客户
  • cordova.js 导致引用错误“未定义需求”

    我想用恩科尔多瓦检测设备的网络状态 然而 一旦我包括科尔多瓦 js我收到一个错误 未捕获的引用错误 未定义 require cordova js 23 我已经安装并成功运行Node js and Cordova 我已经下载并安装了恩科尔多瓦
  • 当我的网页上有一个持续时间计数器时,AngularJS 有什么帮助吗?

    我有一个使用 Angular ui router 的应用程序 当路由器设置为某种状态时 我希望将计时器设置为例如 2 小时 当它设置为另一个状态时 我想让计数器倒计时 我希望在屏幕上显示剩余时间 有谁有关于如何实现此功能的代码示例吗 如果有
  • 单元测试依赖注入

    我对茉莉花和业力是全新的 我相信我的环境设置正确 并且我能够运行非常基本的单元测试 但是一旦我尝试实例化控制器 我就会收到未知提供程序错误 并且我不确定如何调试它 我需要传入 stateProvider 依赖项吗 我在角种子示例中没有看到这
  • 使 href(锚标记)请求 POST 而不是 GET? [复制]

    这个问题在这里已经有答案了 a href employee action Employee1 a 当我单击 Employee1 链接时 GET 请求将发送到服务器 我想让它 POST 而不是 GET 请求 有没有办法改变 href 的默认
  • Swagger 生成 javascript-closure-angular-client

    我是 swagger 的新手 我从 swagger 的在线编辑器生成了一个 javascript 闭包角度客户端 它给了我一个 DefaultAPI js 和其他与我的对象定义匹配的 JS 文件 我在 swagger 文档和网上搜索了一种在
  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • 在 Angular e2e 测试中获取浏览器路径会导致异常

    我有一个简单的 e2e 测试来验证路由重定向是否有效 跑步者 html 场景 js use strict describe e2e function beforeE
  • 如何清除单个函数中的所有 AngularJS $scope 和 $rootScope 值?

    我需要清除所有 scope执行某些操作时的值 例如 如果我点击 Signout 按钮重定向到 signin 页面 然后所有 scope or rootScope应清除会话中的值 我怎样才能实现这个目标 您可以执行以下操作 rootScope
  • 在 Angular 中让多个调用等待同一个 Promise

    我在一个页面上有多个使用相同服务的控制器 为了举例 我们将服务称为 USER 第一次调用 USER getUser 时 它会发出 http 请求来获取有关用户的数据 调用完成后 它将数据存储在 USER data 中 如果再次调用 USER
  • Protractor e2e 测试表头和 , 标签

    我正在使用下表 我想测试每个标签 th td 标签 该标签中的文本以及该文本的计数 HTML 片段 table class table table striped tbody tr th b a Patient Id a b th th b

随机推荐