0

Я создал службу 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, и он говорит, что если атрибут не установлен, он отключит автопрокрутку. Похоже, что это не так. Я попытался установить autoscroll на «false», но это не помогло.

Я знаю, что могу сделать $anchorScrollProvider.disableAutoScrolling(), чтобы отключить все автопрокрутки, но что я могу сделать, чтобы отключить автопрокрутку для определенных тегов? Является ли это ошибкой в ​​Angular, о которой я должен сообщить? Если да, есть ли работа, которую я могу использовать до тех пор, пока эта ошибка не будет исправлена?

EDIT: Вот plunk, который демонстрирует проблему.

ответ

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 инициализирует при загрузке страницы и ничего не делает, когда нг-включать заявление компилирует в ленивом загруженном шаблоне.

0

Согласно Philip Holly's comment произошла смена версии 1.1.5, если нет хеша $ anchorScroll заставляет страницу прокручивать вверх. Исправление добавляет:

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

Хотя я думаю, что установка атрибута autoscroll, как ты должен работал. Возможно, это ошибка.

Кроме того, похоже, делает:

$location.hash("!"); 

незадолго до $ компиляции работает.

+0

У меня такая же проблема с версией 1.1.4. Не назначил бы $ anchorScroll noop отключить автопрокрутку для всех якорей в приложении, как $ anchorScrollProvider.disableAutoScrolling()? –