如何让AngularJS响应导航

Question

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

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

<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。 selected 书在散列标记后作为参数传递。您将看到这样的行为：在 PageA 上时，您可以单击 link 到 PageB，这本书会被适当地 selected。但是如果你点击一个link到PageA，地址栏URL变化，但是控制器功能显然没有运行。同样，在 PageB 上，links 到 PageA 将 select 一本书，但留在 PageB 上的 links 不会。

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

更新一个

有人建议将 target="_self" 添加到 hyperlink 标签。这适用于上面简化的最小示例。不幸的是，它不适用于完全详尽的网站。我不知道为什么。您可以检查 full site，问题是如果您显示任何其他书籍的详细信息，"Featured-Book" 不会显示。

Answer 1

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

ngRoute 很棒，因为您可以通过其 $route 服务或仅通过 $routeParams 访问路线数据。

Answer 2

好的。您似乎需要使用 $location 服务和 $locationChangeSuccess 事件来跟踪 url 更改。这些是 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);
   });
});

如何让AngularJS响应导航

How to get AngularJS to respond to navigation

html

javascript

routes

hyperlink

angularjs