Угловой документ document.ready не работает при использовании ng-view
У меня проблема с document.ready в angularJS при навигации по нескольким маршрутам в моем приложении. Он работает только при использовании ctrl + f5 (перезагрузка страницы); кажется, что перемещение между страницами не изменяет состояние документа до готовности.
контроллер
angular.element(document).ready(function() {
window.scrollTo(0,90);
});
Основной файл html
<!DOCTYPE html >
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
файл приложения
var mainModule = angular.module('myApp', ['ui.bootstrap.dialog']);
function viewServiceConfig($routeProvider) {
$routeProvider.
when('/', {
controller: SomeController,
templateUrl: 'somehtml.html'
}).
when('/someroute', {
controller: SomeRouteController,
templateUrl: 'someroutehtml.html'
}).
otherwise({
redirectTo: '/'
});
}
mainModule.config(viewServiceConfig);
Ответы
Ответ 1
Вы можете прослушивать ваши контроллеры, определенные в маршрутах, т.е. SomeController
и SomeRouteController
для $viewContentLoaded
событий. $viewContentLoaded
испускается каждый раз, когда содержимое ngView перезагружается и должно обеспечивать аналогичную функциональность, как document.ready
при маршрутизации в angularjs:
function SomeController($scope) {
$scope.$on('$viewContentLoaded', function() {window.scrollTo(0,90);});
}
document.ready
также запускается только один раз при загрузке index.html
. Он не запускается, когда загружаются частичные шаблоны, определенные в конфигурации маршрута.
Ответ 2
Развернувшись на ответе @davekr, я обнаружил, что мне нужно добавить $timeout, чтобы обеспечить полный дайджест, и элементы html были доступны для запроса:
function SomeController($scope) {
$scope.$on('$viewContentLoaded', function() {
$timeout(function(){
//Do your stuff
});
});
}
Я пробовал много других событий, и это был единственный способ, который работал надежно.
Ответ 3
Я смог применить событие прокрутки через ответ Дэйва и используя routeChangeSuccess
function SomeController($scope) {
$scope.$on('$routeChangeSuccess', function() {window.scrollTo(0,90);});
}