angularjs - 使用 ng-include 保留传统的 anchor 行为

Question

我不是在构建单页应用程序，而是在某些地方使用 AngularJS 的“传统”站点。我遇到了以下问题(使用 1.3.0-beta.6):

标准的工作 anchor 链接:

<a href="#foo">Link text</a>
... [page content]
<a id="foo"></a>
<h1>Headline</h1>
[more content]

这很好用。现在我在某处介绍一个模板部分:

<script type="text/ng-template" id="test-include.html">
  <p>This text is in a separate partial and inlcuded via ng-include.</p>
</script>

通过以下方式调用:

<div ng-include="'test-include.html'"></div>

部分已正确包含，但 anchor 链接不再起作用。单击“链接文本”现在将显示的 URL 更改为 /#/foo而不是 /#foo并且页面位置不会改变。

我的理解是使用 ng-include隐含地告诉 Angular 我想使用路由系统并覆盖浏览器的 native anchor 链接行为。我已经看到了通过将我的 html anchor 链接更改为 #/#foo 来解决此问题的建议。 ，但由于其他原因我不能这样做。

我不打算使用路线系统 - 我只想使用 ng-include没有它弄乱浏览器行为。这可能吗？

Answer 1

原因是 angular 覆盖了标准 HTML 标签的行为，其中包括 <a>。还。我不确定这个变化是什么时候发生的，因为 angular v1.0.1 可以正常工作。

您应该将 href 属性替换为 ngClick 为:

<a ng-click="scroll()">Link text</a>

在 Controller 中:

function MyCtrl($scope, $location, $anchorScroll) {
  $scope.scroll = function() {
    $location.hash('foo');
    $anchorScroll();
  };
};

演示: http://jsfiddle.net/HB7LU/3261/show/

或者简单地使用双重哈希:

<a href='##foo'>Link text</a>

演示: http://jsfiddle.net/HB7LU/3262/show/

更新:我不知道您不想在 HREF 中进行任何修改。但是您仍然可以通过覆盖现有的 a 来获得所需的结果。指令为:

myApp.directive('a', function() {
  return {
    restrict: 'E', 
    link: function(scope, element) {
        element.attr('href', '#' + element.attr('href'));
    }
  };
});

演示: http://jsfiddle.net/HB7LU/3263/