html - Angular 路由发生了奇怪的事情

Question

我仍在学习 angularjs，所以也许有一些我不理解的愚蠢行为，但在使用路由时我有一个非常奇怪的行为。

在我的应用程序中，我使用以下代码来定义我的路线:

var app = angular.module('app', []);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
  $routeProvider.
    when('/pneumatici/:chunka', {}).
    when('/pneumatici/:chunka/:chunkb', {});

  $locationProvider.html5Mode(true);
}]);

在 Controller 中我以这种方式管理它们:

app.controller('appCtrl', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
  $scope.$on('$routeChangeSuccess', function (current,previous) {
    if (!($location.path().indexOf('/pneumatici') === -1)) {
      $scope.chunka = $route.current.params.chunka; $scope.chunkb = $route.current.params.chunkb;

      /** do my stuff with chunka and chunkb **/

    } else {
      window.location.href = $location.path();
    }
  });

我没有 ngView，没有模板，什么都没有。它就像一个魅力。

请注意我实际强制加载页面的行，以防 url 不打算由 Controller appCtrl 管理。我被迫这样做是因为一旦我定义了我的路由以捕获“$routeChangeSuccess”，单击时页面中的所有链接都会被 Angular 捕获，并且即使链接没有使用“when”定义的格式，也不会发生页面加载。我想用“否则”来做，但如果可行的话，我不知道该怎么做。

现在是问题。在页面中，我当然有像“/privacy.html”这样的链接，如果我点击它们，页面加载就会被正确触发，我确实看到了“/privacy.html”，但不幸的是一旦出现，如果我点击后退按钮 我可以看到浏览器的 url 更改为(比方说)/pneumatici/foo/bar 但没有触发页面加载。

请注意，在 privacy.html 页面中我没有定义 Angular 路由，没有 .config 没有 .when；定义了一个带有 Controller 的 Anagular 应用程序，但没有在任何地方注入(inject)“$routeProvider”，也没有定义任何路由。

发生了什么事？我做错了什么？

感谢您的帮助!

更新。我找到了一个可行的解决方案，添加:

angular.element("a").prop("target", "_self");

对于所有“target”设置为“_self”的“a”元素， Angular 路由被忽略，不知道。

不过，如果我从整体上看这个策略，对我来说听起来不是很优雅，我很乐意改进它。我不喜欢的是，因为我在 .config 中定义了路由，所以我应该能够告诉 angular 跳过任何与我在那里定义的格式/路径不匹配的 url。

但我不知道这是否可行，有人知道吗？

Answer 1

通过打开 html5mode，您的应用应该默认拦截网站上的所有内容(来自“/”。)

从这个 Angular 来看，$location.path() 似乎应该在您的显式覆盖中起作用，但它并不是真正正确的($location.url() 会是)和浏览器已经有正确的 URL，所以也许你不能用 location.href = location.href 强制重新加载在您的特定浏览器中。

我不会沿着这条路走下去，而是会做以下事情让它变干:

如果添加基本 href:

<base href="/pneumatici/"></base>

并在 when 子句中将 /pneumatici/ 替换为 /:

$routeProvider.
    when('/:chunka', {}).
    when('/:chunka/:chunkb', {});

那么你应该只需要这个:

$scope.$on('$routeChangeSuccess', function (current,previous) {

    $scope.chunka = $route.current.params.chunka;
    $scope.chunkb = $route.current.params.chunkb;

  /** do my stuff with chunka and chunkb **/
});