Question

我很难理解为什么我的基础href似乎区分大小写。我有一个带有基本href的页面，并使用angularjs路由。

HTML：

<html ng-app="app">
    <head>
        <base href="/Foo/"/>
    </head>
    <body>
        <div>Foo</div>
        <div ng-view></div>  
    </body>
</html>

JS：

var module = angular.module('app', []);

module.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Home/Page1', { templateUrl = 'partials/page1' })
        .otherwise({ redirectTo: '' });

     $locationProvider.html5Mode(true);
     $locationProvider.hashPrefix('!');
});

如果我导航到http://www.example.com/Foo/，那很好。但是当我导航到http://www.example.com/foo/时，我得到一个角度误差：

Error: Invalid url "http://www.example.com/foo/", missing path prefix "/Foo" !
at Error (<anonymous>)
at Object.LocationUrl.$$parse (http://www.example.com/foo/Scripts/angular.js:4983:13)
at Object.LocationUrl (http://www.example.com/foo/Scripts/angular.js:5014:8)
at $LocationProvider.$get (http://www.example.com/foo/Scripts/angular.js:5387:21)
at Object.invoke (http://www.example.com/foo/Scripts/angular.js:2809:28)
at http://www.example.com/foo/Scripts/angular.js:2647:37
at getService (http://www.example.com/foo/Scripts/angular.js:2769:39)
at Object.invoke (http://www.example.com/foo/Scripts/angular.js:2787:13)
at $CompileProvider.directive (http://www.example.com/foo/Scripts/angular.js:3613:43)
at Array.forEach (native) angular.js:5582

如果它有所帮助/有所作为，则站点在IIS上托管并使用MVC 4.

Answer 1

您需要关闭angularjs路由提供程序的区分大小写。

请查看此功能的详细信息： add caseInsensitiveMatch option for url matching

Answer 2

我正在使用UI路由器，因此无法使用为ngRoute建议的方法来解决路由区分大小写问题。解决方案在 https://github.com/angular-ui/ui-router/issues/197 为我的路线工作，但没有为基本href问题，这是发布的原始问题。

我能够通过为$ browser添加装饰器来解决此问题，该装饰器将basehref和url设置为小写。如果您查看导致问题的startsWith方法中导致问题的比较值的来源，您将看到它们最终来自$ browser。

最终，该解决方案解决了路由和基本href区分大小写并且不需要$ urlRouterProvider建议。因此，如果您的DOM中没有显式设置的基本href元素，则该链接中建议的$ urlRouterProvider规则将解决您的问题。否则，这将解决基本href和路由。

使用ui-router解决了基本href和路由问题的完整解决方案：

  $provide.decorator('$browser', [
                    '$delegate', function($delegate) {

                        var _baseHref = $delegate.baseHref,
                            _url = $delegate.url;

                        $delegate.baseHref = function() {
                            return angular.lowercase(_baseHref());
                        };
                        $delegate.url = function(url, replace) {
                            // no need to modify the setter
                            if (url) {
                                return _url(url, replace);
                            }
                            // just lowercase the getter
                            return angular.lowercase(_url());
                        };
                        return $delegate;
                    }
                ]);

Answer 3

有同样的问题，但有不同的解决方案。这对我有用，并且不会干扰路由，开始或假设事物是/应该是小写。

在初始化角度之前将其放入（例如在html页面的头部）

// Fix base url being case sensitive
(function () {
     var base = document.querySelector("base");
     var normalized = RegExp(base.href, "i").exec(location.href);
     base.href = normalized ? normalized[0] : base.href;
}());

Answer 4

这个问题的一个很好的解决方案是为$ route创建一个装饰器，并设置不区分大小写的规则。通过这种方式，您不必为每个“when”创建字段caseInsensitiveMatch。在此网址中，您可以找到有关此解决方案的更多信息：http://iranreyes.com/angularjs-decorating-route

Answer 5

截至今天，caseInsensitiveMatch不包含在AngularJS 1.0.7的稳定版本中，但它包含在不稳定版本1.1.5中（https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js）测试并按预期工作

Answer 6

接受的答案不起作用，因为这只影响路线而不影响基本网址。这是一个看起来很难的错误＆＃34;修复Angular开发人员。参考 - https://github.com/angular/angular.js/issues/4056

要自己解决这个问题，你需要重写angular.js中的startsWith（）函数来比较小写 -

＆＃13;

function beginsWith(begin, whole) {
	if (whole.toLowerCase().indexOf(begin.toLowerCase()) === 0)
	{
    return whole.substr(begin.length);
  }
}

＆＃13;

AngularJS + Base Href区分大小写？

6 个答案: