Question

我正在设计一个拥有固定数据集的网站（17条记录 - 每条记录代表一本“待售图书”），并允许在几个页面之间导航，显示每本书的详细信息。我遇到的问题是，当超链接转到不同的视图时，一切正常，但如果超链接是同一视图的不同书籍，则无法运行控制器脚本。如何强制完成此操作。

我制作了一个最小的可执行示例：

<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
   <script>
   var fooApp = angular.module('fooApp', []);
   fooApp.controller('fooCtrl', function ($scope) {
       $scope.books = ["Book1", "Book2", "Book3", "Book4", "Book5"]
       $scope.selectedBook = "Book1";
       var curPath = window.location.toString();
       var hashPos = curPath.indexOf("#/");
       if (hashPos>0) {
           $scope.selectedBook = curPath.substring(hashPos+2);
       }
   });
</script>
</head>

<body ng-app="fooApp" ng-controller="fooCtrl">

Selected Book: {{selectedBook}}

<ul>
<li ng-repeat="book in books">Visit A <a href="PageA.htm#/{{book}}">{{book}}</a>
</li>
</ul>
<ul>
<li ng-repeat="book in books">Visit B <a href="PageB.htm#/{{book}}">{{book}}</a>
</li>
</ul>
</body></html>

将上述内容保存到两个不同的文件：PageA.htm和PageB.htm。所选书籍作为哈希标记之后的参数传递。您将看到以下行为：在PageA上，您可以单击指向PageB的链接，并相应地选择该书。但是，如果您点击指向PageA的链接，地址栏中的 URL更改，但控制器功能显然不会运行。同样，在PageB上，指向PageA的链接将选择一本书，但留在PageB上的链接则不会。

我喜欢这样的事实：页面没有从服务器重新读取...它来自缓存，但我想以某种方式再次触发控制器功能，以便可以读取新传递的参数并且显示正确的数据。我做错了什么？

更新一个

有人建议将target="_self"添加到超链接标记中。这适用于上面简化的最小示例。不幸的是，它不适用于完全精心设计的网站。我不知道为什么。您可以查看full site，问题是如果您要显示任何其他图书的详细信息，则不会显示“精选图书”。

Answer 1

确定。您似乎需要使用$location服务和$locationChangeSuccess事件才能跟踪网址更改。这些是Angular核心API的一部分。

fooApp.controller('fooCtrl', function ($scope, $rootScope, $location) {
   $scope.books = ["Book1", "Book2", "Book3", "Book4", "Book5"]
   $scope.selectedBook = "Book1";
   $rootScope.$on('$locationChangeSuccess', function (event, location) {
      $scope.selectedBook = $location.path().substring(1);
   });
});

Answer 2

您似乎正在尝试实施路线系统。你有没有看过Angular的ngRoute？查看this示例。

ngRoute非常棒，因为您可以通过$ route服务或仅通过$ routeParams访问路径数据。

如何让AngularJS响应导航

2 个答案: