使用ng include保留传统的锚行为

Question

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

标准，工作锚链接：

<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>

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

我的理解是，使用ng include隐式地告诉Angular我想要使用routes系统并覆盖浏览器的本机锚链接行为。我看到了一些建议，建议将我的html锚链接更改为。/#foo，但由于其他原因，我不能这样做。

我不打算使用routes系统-我只想使用ng include，而不会影响浏览器行为。这可能吗？

Answer 1

这是最好的解决方案，适用于Angular的最新版本：

在AngularJS中关闭URL操作

Answer 2

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

路由系统是在一个单独的模块ngRoute中定义的，因此，如果您没有自己注入它——我很确定您没有注入它——它根本无法访问。

这里的问题有些不同。

ng include取决于：$http，$templateCache，$anchorScroll，$animate，$sce。因此，请使用ng include启动所有这些服务。

最自然的候选调查将是$anchorScroll。$anchorScroll的代码似乎没有任何危害，但是服务依赖于$windows，$位置，$rootScope。第616行的代码是：

 baseHref = $browser.baseHref(), // if base[href] is undefined, it defaults to ''

所以基本上，如果之前没有设置，基本href被设置为"。

现在看这里-从巴卢斯回答：

至于使用命名锚点，比如，对于标记，您基本上声明了与之相关的所有相对链接，包括命名锚点。所有的相对链接都不再与当前的请求URI相对（如果没有标记，就会发生这种情况）。

我今天没有太多时间，所以无法自己测试它，但我会尝试检查的第一个选项是连接到“$locationChangeStart”事件，如果新url是#xxxxxx类型，只需防止默认行为，并改为使用$anchorcroll本机方法滚动 。

我认为这个代码应该做的工作：

$scope.$on("$locationChangeStart", function (event, next, current) {

    var el, elId;

    if (next.indexOf("#")>-1) {
        elId = next.split("#")[1];
        el = document.getElementById(elId);
        if(el){
           // el.scrollIntoView(); do not think we need it
           window.location.hash = "#" + elId;
           event.preventDefault();
        }    
    }
});

Answer 3

原因是angular重写了标准HTML标记的行为，其中包括

您应该将href属性替换为ngClick as：

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

在控制器中，这样：

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/