Angular路由无限循环

Question

因某些原因，在我的路由中有一个动态属性，并访问该页面时，我会陷入一个无限循环的境地，其中该页面将不断请求自身。

.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
{
    $locationProvider.html5Mode(true);

    $routeProvider.when("/", {
        templateUrl: "pages/index.html",
        controller: "IndexCtrl"
    }).when("/listhome", {
        templateUrl: "pages/listhome.html",
        controller: "ListHomeCtrl"
    }).when("/profile", {
        templateUrl: "pages/profile.html",
        controller: "ProfileCtrl"
    }).when("/newlist", {
        templateUrl: "pages/newlist.html",
        controller: "NewListCtrl"
    }).when("/userlists/:id", {
        templateUrl: "pages/userlists.html",
        controller: "UserListsCtrl"
    }).otherwise({
        redirectTo: "/"
    });

我正在查看的路由是/userlists/:id路由。该路由的控制器是-

TopTenApp.controller("UserListsCtrl", ["$scope","$routeParams", function($scope, $routeParams)
{
    console.log($routeParams);
    $scope.lists = [];
}]);

当我访问/userlists/9时，我看到-

Object {id: "9"}

每隔3秒就会被登出，并且页面会冻结。似乎只要在位置后面加上反斜杠（"/userslists/"而不是"/userlists"），就会发生这种情况。

有人知道这是什么原因吗？

- micah

---

你使用哪个服务器？它是如何设置的？ - Ilan Frumer

我遇到的另一个问题是，如果我直接通过地址栏而不是通过站点上的链接访问/userlists/9，整个页面的HTML内容都会被警报。有人知道这是为什么吗？ - micah

别管我说了什么。这是另一个逻辑问题，与AngularJS无关。 - micah

Answer 1

我真傻，终于意识到问题了。我猜这很有道理，但当页面有多个“目录”深度时，模板URL需要在前面加上一个斜杠。

.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
{
    $locationProvider.html5Mode(true);

    $routeProvider.when("/", {
        templateUrl: "/pages/index.html",
        controller: "IndexCtrl"
    }).when("/listhome", {
        templateUrl: "/pages/listhome.html",
        controller: "ListHomeCtrl"
    }).when("/profile", {
        templateUrl: "/pages/profile.html",
        controller: "ProfileCtrl"
    }).when("/newlist", {
        templateUrl: "/pages/newlist.html",
        controller: "NewListCtrl"
    }).when("/userlists/:id", {
        templateUrl: "/pages/userlists.html",
        controller: "UserListsCtrl"
    }).otherwise({
        redirectTo: "/"
    });
}]);

希望这能帮助其他遇到类似问题的人。

- micah

---

这刚好解决了我一个类似的问题（在我花费比我想承认的时间更长之后）。谢谢！ - kajetons

同样的问题，我的问题是templateUrl拼写错误。谢谢！ - Bertrand

当我添加正斜杠时，我遇到404（未找到）错误。 - AJ_83

@AJ_83 这在很大程度上取决于你的URL设置方式。 - micah

谢谢你，我只是想知道你是怎么解决的，我花了很多时间，几乎要疯了 :) 另外，如果你的页面中有图片或链接，它们也需要在前面加上斜杠。 - Milad Rezazadeh