如何让 AngularJS 响应导航

我正在设计一个网站，该网站具有固定的数据集（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。所选书籍将作为哈希标记后的参数传递。您将看到如下行为：在页面 A 上时，您可以单击指向页面 B 的链接，并正确选择书籍。但是，如果您单击指向PageA的链接，则地址栏中的URL会更改，但控制器功能显然不会运行。同样，在 Page B 上，指向 Page A 的链接将选择一本书，但保留在 Page B 上的链接不会。

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

更新一

有些人建议在超链接标签中添加target="_self"。这适用于上面的简化最小示例。不幸的是，它不适用于完全精心制作的网站。我不知道为什么。您可以查看整个网站，问题是如果您显示任何其他书籍的详细信息，则不会显示"精选书籍"。

好的。您似乎需要使用$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);
   });
});

您似乎正在尝试实现路由系统。你看过Angular的ngRoute吗？看看这个例子。

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

相关内容

最新更新

热门标签：