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属性。 click函数调用我的自定义服务来呈现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属性，并表示如果未设置该属性，则会“禁用自动滚动”。看来情况并非如此。我尝试将autoscroll设置为“false”，但这没有帮助。

我知道我可以$anchorScrollProvider.disableAutoScrolling()禁用所有自动滚动功能，但是如何禁用特定代码的自动滚动？这是我应该报告的Angular中的错误吗？如果是这样，是否有解决方法我可以使用，直到修复了该错误？

编辑：这是展示问题的plunk。

Answer 1

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

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

虽然我认为设置autoscroll属性应该有效。也许那是一个错误。

或者它看起来像在做：

$location.hash("!");

在$ compile之前也可以。

Answer 2

我使用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语句时不执行任何操作。

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

2 个答案: