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>

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

Answer 1

您需要使用$anchorScroll

调用时，它会滚动到与指定哈希相关的元素或者（如果省略）到$ location.hash（）的当前值，根据 HTML5规范中指定的规则。

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

在控制器中添加：

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

如何将锚点包含在放置在不同模板中的元素中？

1 个答案: