代码之家 › 专栏 › 技术社区 › tris

AngularJS+基本Href区分大小写?

radix href angularjs routes

tris · 技术社区 · 12 年前

我很难理解为什么我的基本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。

6 回复 | 直到 8 年前

Community Mohan Dere 5 年前

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

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

user2842949 10 年前

我使用的是UI路由器,所以无法使用ngRoute建议的方法解决路由大小写敏感性问题。位于的解决方案 https://github.com/angular-ui/ui-router/issues/197 对我的路线有效,但对发布的原始问题基本href问题无效。

我通过为$browser添加一个装饰器来解决这个问题,该装饰器将basehref和url设置为小写。如果您在导致问题的beginsWith方法中查看导致问题的比较值的来源,您会发现它们最终来源于$browser。

最终,该解决方案解决了路由和基本href大小写敏感性问题,不需要$urlRouterProvider建议。因此,如果您的DOM中没有显式设置的基本href元素,那么该链接中建议的$urlRouterProvider规则将解决您的问题。否则,这既解决了基本href问题,也解决了路由问题。

解决了基本href和使用ui路由器路由问题的完整解决方案:

  $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;
                    }
                ]);

E. Mourits 9 年前

有同样的问题,但有不同的解决方案。这对我来说很有效,不会干扰路由、beginsWith或事情是/应该是小写的假设。

将其放在angular初始化之前(如在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;
}());

Iran Reyes 11 年前

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

Ali Hmer 12 年前

截至目前,caseInsensitiveMatch未包含在AngularJS 1.0.7的稳定版本中,但包含在不稳定版本1.1.5中( https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js ) 测试并按预期工作

Craig 10 年前

接受的答案将不起作用,因为这只会影响路由,而不会影响基本url。对于Angular开发人员来说,这是一个看起来“太难”修复的错误。参考-- https://github.com/angular/angular.js/issues/4056

要自己解决这个问题,您需要重写angular.js中的beginsWith()函数,以便对小写进行比较--

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