angularjs - Angular js : How to use URL path in a controller to populate scope

Question

我希望能够在 Controller 中使用部分 URL，在这种情况下能够根据 URL 设置主体类，但我还想使用服务从 json 中获取其他信息基于该 URL 的文件。

如果我使用 console.log 通过 for 循环检查 $scope.pageDetail.id 中的内容，我会得到正确的响应，但它在 for 之外返回“未定义” 循环。一切都在页面重新加载时有效，但当我使用页面的导航点击我的方式浏览 url 时却不行。

我的 Controller :

oddproto.controller('UrlController', function($scope, $location, PageService){

  // Get page id from URL
  var pageId  = $location.path().replace("/", "");

  $scope.pageDetail = PageService.query(function(data) {
    // Get the correct page details from the dataset
    for (var i = 0; i < data.length; i++) {
      if (data[i].id === pageId) {
        $scope.pageDetail = data[i];
        break;
      }
    }
  });

})

我的服务

oddproto.factory('PageService', function($resource) {
  return $resource('includes/pages.json');
});

pages.json

[
  {
    "id": "blog",
    "name": "Blogg"
  },
  {
    "id": "cases",
    "name": "Projekt"
  },
  {
    "id": "contact",
    "name": "Kontakt"
  }
]

我也试过在没有服务的情况下这样做，即

$scope.pageDetail = $location.path().replace("/", "");

但这也只适用于页面加载，所以在我看来 $location 是这里的问题。不过我不知道我还能用什么。

Answer 1

您的 Controller 无法识别位置变化。初始化 Controller 时，它会设置页面 ID，但更改后，您的 Controller 不会重新初始化。为此，您应该使用

scope.location=$location;
scope.$watch('location.path()', function(path) {
  $scope.pageDetail = ....
});

这将观察 location.path() 并且如果它发生变化，它会执行您的自定义魔法。

此外，我建议你让你的 Controller 成为一个指令，因为它只处理你的 body-tag 的样式。