Javascript 从Angular中删除hashchange事件，或防止Angular重写锚链接_Javascript_Angularjs_Anchor_Angular Routing

Javascript 从Angular中删除hashchange事件，或防止Angular重写锚链接

javascript angularjs

Javascript 从Angular中删除hashchange事件，或防止Angular重写锚链接,javascript,angularjs,anchor,angular-routing,Javascript,Angularjs,Anchor,Angular Routing,我们有一个使用Angular的项目，但仅用于UI绑定/AJAX方面，而不用于任何类型的路由或SPA功能我们希望能够在我们选择的CMS中撰写的文章中使用锚定链接（#section-2），以及使用其他页面的锚定链接（/my page#section-C），但Angular会将这些链接重写为#/section-2，这会破坏CMS设置的锚定链接不可能通过增加CMS来修改锚链的处理方式是否可以：从Angular中删除hashchange事件绑定？我在源文件src/ng/browser.js中看到了

我们有一个使用Angular的项目，但仅用于UI绑定/AJAX方面，而不用于任何类型的路由或SPA功能

我们希望能够在我们选择的CMS中撰写的文章中使用锚定链接（

#section-2

），以及使用其他页面的锚定链接（

/my page#section-C

），但Angular会将这些链接重写为

#/section-2

，这会破坏CMS设置的锚定链接

不可能通过增加CMS来修改锚链的处理方式

是否可以：

从Angular中删除

hashchange

事件绑定？我在源文件

src/ng/browser.js

中看到了这个事件，它处理一些路由和链接重写，但它位于闭包内部，因此无法直接访问（我们从CDN链接到Angular，因此不可能修改Angular源，而且我们不想维护自己的源）“自定义”角度源）

设置一个选项或调用一个配置方法，最终禁用Angular的整个路由方面，并防止其重写任何类型的链接？（或者，有没有办法不包括Angular的这一部分，但仍然保留controller/UI绑定/AJAX功能？）

请注意，我已经尝试了以下方法：

$locationProvider.html5Mode(true)

但是，它会使站点上的所有其他链接无法运行，因为所有链接都是通过Angular进行处理的。因此，如果我链接到主页（

），并在

HTML5模式

打开的情况下单击该链接，则该链接不会起任何作用。

我相信您需要。请参阅此相关答案：

下面是一个如何工作的示例。哈希仅作为id的一部分处理：

app.controller('TestCtrl', function($location, $anchorScroll) {
   var vm = this;
   vm.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

<a ng-click="vm.scrollTo('#foo')">Foo</a>

<div id="#foo">Here you are</div>

参见

作为一种解决方法（当然不是最佳实践），我最终修改了角度源以删除URL重写

我做了一些更改，但我认为导致锚链接再次工作的是在Angular source中的

location.js

第844行添加了

return；

语句：

这会缩短URL重写功能的大部分时间

我还完全删除了

browser.js

的第262-264行，这将删除Angular在

hashchange

事件上的钩子：

这似乎没有影响Angular的任何绑定功能，但它确实导致锚链接重新开始工作。

但为什么不使用ng route？它将完全解决您的问题。使用ng routes可以实现以下目标（这正是您想要的）

Html链接重写当您使用HTML5历史API模式时，不需要特殊的hashbang链接。您只需指定常规URL链接，例如：

当用户单击此链接时

在传统浏览器中，URL更改为

/index.html#！/some？foo=bar

在现代浏览器中，URL变为

/some？foo=bar

在如下情况下，链接不会被重写；相反，浏览器将对原始链接执行完整页面重新加载

包含目标元素的链接示例：

指向不同域的绝对链接示例：

以“/”开头并指向不同基本路径的链接示例：

相对链接确保检查所有相关链接、图像、脚本等。Angular要求您在主html文件（

）的头部指定url基，除非在传递给$locationProvider.html5Mode（）的html5Mode定义对象中将html5Mode.requireBase设置为false。这样，即使文档的初始url不同，相对url也将始终解析为此基础url

有一个例外：仅包含哈希片段的链接（例如，


在设置$locationProvider.html5模式（true）后，您是否也在文档的
中设置了

<html>
  <head>
    <base href="/">
  </head>
</html>



看看：
“有两件事需要做
配置$locationProvider
为相对链接设置基础
或者
我在与wordpress一起使用angular时遇到了类似的问题，并找到了一个非常简单的修复方法。您所要做的就是删除控制器中的所有$location注入。当您注入$location服务（无论您是否使用）时，它会劫持#行为
这意味着您必须仔细检查所有控制器、指令等，并确保$location服务不会被注入任何地方
HTH
Angular的设置就是您要寻找的。它会将Angular置于一种模式中，$location仍然可以用来读取和写入浏览器的url，但它永远不会试图劫持链接点击并触发Angular的SPA路由
例如：
我在ASP.NET项目中使用Angular仅用于UI绑定，不设置任何路由，也不使用ngRoute模块。任何链接都有效correctly@Mikalai我没有使用任何路由，也没有使用ngRoute。我所做的只是将angular.min.js
包含到我的站点中，我正在尝试使用锚链接，Angluar正在重写它们。问题是这（以及它不起作用的原因）是我们集成的CMS只以传统的HTML方式创建锚链接将不起作用，因为CMS的WYSIWYG编辑器无法以这种方式生成锚定链接。锚定链接格式不得更改。事实上，我已连接到$routeChangeStarted
，$routeChangeSuccess
，以及$routeChangeError
，并且没有从该页面上的控制器中触发任何事件。我没有ve$rootScope作为一个依赖项被拉入我的控制器。除非您使用的是ngRoute，否则挂接到“我想在这里非常清楚：这并没有解决我的问题。它
 $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) {
        $anchorScroll();  
    }
 });

<a href="http://www.example.com/base/#section-A"> Section A</a>

<a href="http://www.example.com/base/my-page#section-C">Another page</a>

<a href="/other-base/another?search">external</a>

app.config(function($locationProvider) {
  $locationProvider.html5Mode(true).hashPrefix('!');
})

<html>
  <head>
    <base href="/">
  </head>
</html>

  $locationProvider.html5Mode({
      enabled: true,
      requireBase: false,
      rewriteLinks: false 
  });