21

在我的应用程序中的多条路线之间导航时，我在 angularJS 中遇到了 document.ready 的问题。它仅在我使用 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);
4

3 回答 3

40

您可以在路由中定义的控制器中侦听，SomeController即事件。每次重新加载 ngView 内容时都会发出，并且应该提供与angularjs 中的路由类似的功能：SomeRouteController$viewContentLoaded$viewContentLoadeddocument.ready

function SomeController($scope) {
   $scope.$on('$viewContentLoaded', function() {window.scrollTo(0,90);});
}

当document.ready您加载index.html. 加载路由配置中定义的部分模板时不会触发它。

于 2013-07-30T12:04:06.773 回答
6

扩展@davekr 的答案，我发现我需要添加一个 $timeout 以确保摘要已完成并且 html 元素可用于查询：

function SomeController($scope) {
    $scope.$on('$viewContentLoaded', function() {
        $timeout(function(){
            //Do your stuff
        });
    });
}

我尝试了许多其他事件，这是唯一可靠的方法。

于 2016-03-22T09:54:37.687 回答
4

我能够通过戴夫的回答和使用routeChangeSuccess应用滚动事件

function SomeController($scope) {
    $scope.$on('$routeChangeSuccess', function() {window.scrollTo(0,90);});
}
于 2013-07-30T12:55:48.127 回答