仅对页面上的某些锚标记禁用自动滚动

Question

我创建了一个 AngularJS 服务，它动态地将一个 div 插入到 DOM 中，其中包含来自模板的内容和一个处理模板中的绑定和指令的自定义控制器。该服务名为myService，允许您传入templateUrl 和controllerName 作为选项。以下是简化代码：

function display(id, templateUrl, controllerName) {
  var scope = $rootScope.$new();
  scope.id = id;
  var element = angular.element('<div ng-include="\'' + templateUrl + '\'"></div>');
  var controller = $controller(controllerName, {$scope: scope});
  element.contents().data('$ngControllerController', controller);
  $compile(element)(scope);
  parentElement.append(elem);
}

我在 DOM 上有一个单独的控制器来处理几个锚标签上的 ng-click：

<a ng-click="handleClick(record.id, record.templateUrl, record.controllerName)">Click Me</a>

我没有使用$routeProvider，并且锚标记上没有 href 和 id 属性。点击函数调用我的自定义服务来渲染 div：

$scope.handleClick = function($event, id, templateUrl, controllerName) {
  myService.display(id, templateUrl, controllerName);
};

在 Chrome 浏览器中加载页面后，我向下滚动以显示带有 ng-click 的链接，然后单击该链接，浏览器将滚动到页面顶部。我不希望页面滚动，只需在链接旁边显示 div。该位置的 URL 没有任何变化。如果我向下滚动，我会看到显示的新 div。如果我单击带有ng-click 的不同链接，则不会发生滚动（这也是我第一次单击时想要的）。如果我刷新页面，我首先单击哪个链接并不重要，并且第一次单击总是会导致浏览器滚动回视口的顶部。

如果我没有将ng-include 指令放在我的新元素中，而只是在服务中硬编码模板的HTML，则不会在第一次单击时滚动到页面顶部。

ngInclude documentation 表示您可以指定可选的autoscroll 属性，它表示如果未设置该属性，那么它将“禁用自动滚动”。看来情况并非如此。我尝试将自动滚动设置为“false”，但这没有帮助。

我知道我可以使用$anchorScrollProvider.disableAutoScrolling() 来禁用所有自动滚动，但是我可以做些什么来禁用特定标签的自动滚动？这是我应该报告的 Angular 中的错误吗？如果是这样，在修复该错误之前是否有解决方法？

编辑：这是一个plunk，它演示了这个问题。

Answer 1

我在使用 Angular v1.2.2 时遇到了完全相同的问题，模板文件中的 ng-include 从一开始就没有加载到页面中。当模板文件被编译时，$anchorScroll 第一次被初始化并且由于某种原因重置了滚动。

我的解决方案：

var example = angular.module('example', [])
    //Force initialization of $anchorScroll, so that the scroll doesn't reset when compiling an ngInclude that has been lazy loaded.
    .run(['$anchorScroll', function () { }]);

这样 $anchorScroll 在页面加载时初始化，当 ng-include 语句在延迟加载的模板中编译时什么都不做。

Answer 2

根据Philip Holly's comment，版本 1.1.5 发生了变化，如果没有哈希 $anchorScroll 会导致页面滚动到顶部。修复正在添加：

angular.module('myApp').value('$anchorScroll', angular.noop);

虽然我认为像您所做的那样设置 autoscroll 属性应该可行。也许这是一个错误。

或者它看起来像在做：

$location.hash("!");

就在 $compile 也可以工作之前。