javascript - 如何将 anchor 包含到放置在不同模板中的元素？

Question

假设我在 sidebar.html 部分中有以下列表:

<div id="players">...</div>
<div ng-include="'partials/courts.html'"></div>

<ul>
  <li><a href="#players">Players</a></li>
  <li><a href="#courts">Courts</a></li>
</ul>

但是 div#courts 不在 sidebar.html 中，而是在 partials/courts.html 中:

// partials/courts.html
<div id="courts">...</div>

如何从 sidebar.html 的列表中引用 div#courts？

Answer 1

您需要使用 $anchorScroll

When called, it scrolls to the element related to the specified hash or (if omitted) to the current value of $location.hash(), according to the rules specified in the HTML5 spec.

• https://docs.angularjs.org/api/ng/service/$anchorScroll

<小时/>

将其添加到您的 Controller 中:

app.controller('MainCtrl', function($scope, $location, $anchorScroll) {

   $scope.scroll = function(id) {
      $location.hash(id);
      $anchorScroll();
   }

});

更改链接以包含 ng-click="scroll('<element id>') :

<ul>
  <li><a href="" ng-click="scroll('players')">Players</a></li>
  <li><a href="" ng-click="scroll('courts')">Courts</a></li>
</ul>

在线演示 - https://plnkr.co/edit/54O1NAy3Z7bguRXeSCsO?p=preview