我正在设计一个站点,该站点具有固定的数据集(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,问题是如果显示任何其他书籍的详细信息,则不会显示“功能书籍”。

最佳答案

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

10-07 17:58