48

我正在尝试使用 Angular 编写我的第一个网络应用程序。

在正常模式下（html5Mode 关闭），Angular 会强制地址的哈希部分看起来像“路径”（添加前导“/”），并对特殊字符进行编码 - 例如，它允许单个“？” 和哈希中的“#”，并用 %3F 和 %23 替换其他的。

有没有办法关闭这个功能？我不想使用$locationProvider / $routeProvider功能 - 我想自己解析哈希（在我的情况下，用户将在哈希中输入一些“自由文本”以在我的网站内搜索）。

我读到 routeProvider 无法配置为使用正则表达式...

如果打开了 htmlMode，那么地址的哈希部分不会被强制看起来像一个路径（没有前导“/”），但它仍然编码特殊字符。

我知道某些浏览器可能无论如何都会对特殊字符进行编码/转义，但是如果用户设法在其地址栏中输入了一些特殊字符，那么我不想更改它。

谢谢

4

5 回答 5

67

不确定这样做的副作用，但它可以完成工作。请注意，即使有意，它将禁用角度应用程序的所有位置操作。

angular.module('sample', [])
    .config( ['$provide', function ($provide){
        $provide.decorator('$browser', ['$delegate', function ($delegate) {
            $delegate.onUrlChange = function () {};
            $delegate.url = function () { return ""};
            return $delegate;
        }]);
    }]);

ES6 变体：

angular.module('sample', [])
    .config(["$provide", $provide => {
        $provide.decorator("$browser", ["$delegate", $delegate => {
            $delegate.onUrlChange = () => { };
            $delegate.url = () => "";

            return $delegate;
        }]);
    }]);

在 Chrome 30、IE9、IE10 中测试。
灵感来自https://stackoverflow.com/a/16678065/369724

于 2013-11-07T00:31:06.440 回答
5

我使用 angular.js 的本地副本。搜索

$browser.onUrlChange(function(newUrl, newState) {

和

$rootScope.$watch(function $locationWatch() {

注释掉相应的行，angularjs 将停止监视位置 url 的变化。

于 2015-01-12T03:13:39.230 回答
2

@greg.kindel（公认的解决方案）的解决方法对我不起作用。它引发了很多关于无限摘要循环的错误。我正在使用 Angular 1.5.8。

我能够将该解决方法调整为以下内容以使事情正常进行。我希望它能拯救别人的悲伤。

angular.module('sample', [])
  .config(['$provide', function ($provide) {
    $provide.decorator('$browser', ['$delegate', '$window', function ($delegate, $window) {
      $delegate.onUrlChange = function () {};
      //
      // HACK to stop Angular routing from manipulating the URL
      //
      // The url() function seems to get used in two different modes.
      //
      // Mode 1 - Zero arguments
      // There are no arguments given, in which case it appears that the caller is expected the
      // browser's current URL (a string response).
      //
      // Mode 2 - Three arguments
      // It receives three arguments (url, some_boolean, null).  It seems the caller is expecting
      // the browser's URL to be updated to the given value.  The result of this function call is
      // expected to be the $delegate itself, which will subsequently get called with no arguments
      // to check the browser's URL.
      //
      // The Hack:
      // We save the URL so that we can lie to the caller that the URL has been updated to what was
      // requested, but in reality, we'll do nothing to alter the URL.
      //
      var savedUrl = null
      $delegate.url = function (url, ...args) {
        if (!!url) {
          savedUrl = url;
          return $delegate;
        } else {
          return !!savedUrl ? savedUrl : $window.location.href;
        }
      };
      return $delegate;
    }]);
  }])
于 2020-04-29T15:35:47.677 回答
2

感谢@greg.kindel 的回答，您帮我找到解决锚问题的解决方案。这段代码让 AngularJS 应用程序忽略一些哈希模式，让它像浏览器默认一样工作。我不需要启用 html5Mode，并且 ngRoute 仍在工作。:)

app.config(['$provide', function ($provide) {
    $provide.decorator('$browser', ['$delegate', '$window', function ($delegate, $window) {
        // normal anchors
        let ignoredPattern = /^#[a-zA-Z0-9].*/;
        let originalOnUrlChange = $delegate.onUrlChange;
        $delegate.onUrlChange = function (...args) {
            if (ignoredPattern.test($window.location.hash)) return;
            originalOnUrlChange.apply($delegate, args);
        };
        let originalUrl = $delegate.url;
        $delegate.url = function (...args) {
            if (ignoredPattern.test($window.location.hash)) return $window.location.href;
            return originalUrl.apply($delegate, args);
        };
        return $delegate;
    }]);
}]);

在 Chrome 69、Firefox 62 中测试

AngularJS 1.7.4

于 2018-10-16T07:48:59.413 回答
1

如果我没记错的话，Angular 的路由不是强制性的，但是你必须注意重新加载控制器、视图等。

于 2013-11-07T00:41:52.613 回答