我正在设计一个网站，该网站具有固定的数据集(17 条记录 - 每条记录代表一本待售“书籍”)，并允许在显示每本书详细信息的多个页面之间进行导航。我遇到的问题是，当超链接转到不同的 View 时，一切正常，但如果超链接指向同一 View 的不同书籍，则无法运行 Controller 脚本。我如何强制执行此操作。
我制作了一个最小的可执行示例:
<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 会发生变化，但 Controller 功能显然不会运行。同样，在 PageB 上，指向 PageA 的链接将选择一本书，但保留在 PageB 上的链接则不会。
我喜欢这样一个事实:该页面不会从服务器重新读取......它来自缓存，但我想以某种方式再次触发 Controller 功能，以便可以读取新传递的参数并且显示正确的数据。我做错了什么？
更新一个
有些人建议将 target="_self" 添加到超链接标记中。这适用于上面简化的最小示例。不幸的是，它不适用于完全详细的网站。我不知道为什么。您可以查看full site问题是，如果您显示任何其他书籍的详细信息，则不会显示“精选书籍”。
最佳答案
好的。看来您需要使用 $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);
});
});
关于javascript - 如何让 AngularJS 响应导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27867588/