0

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

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>

我没有使用 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文档说您可以指定一个可选autoscroll属性，并且它说如果未设置该属性，那么它将“禁用自动滚动”。看来情况并非如此。我尝试将自动滚动设置为“false”，但这没有帮助。

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

编辑：这是一个演示问题的笨拙。

4

2 回答 2

0

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

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

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

或者，它看起来像这样做：

$location.hash("!");

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

于 2013-07-19T21:50:25.990 回答
0

我在使用 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 语句在延迟加载的模板中编译时什么都不做。

于 2014-11-21T07:45:44.813 回答