AngularJS 中使用 ng-view 时，document.ready 不起作用

在本文中，我们将介绍在使用 AngularJS 中的 ng-view 指令时，为何 document.ready 不起作用的原因，以及如何解决这个问题。

阅读更多：AngularJS 教程

AngularJS 的 ng-view

ng-view 是 AngularJS 提供的一个指令，用于在单页面应用中加载指定的视图模板。通过 ng-view，我们可以实现在不刷新整个页面的情况下，更新页面的内容。

document.ready 事件

在 jQuery 中，我们经常会使用 document.ready 事件来确保 DOM 元素已经加载完毕，以便在页面完全加载后执行相应的操作。

ng-view 和 document.ready 的冲突

然而，当我们同时使用 AngularJS 的 ng-view 和 jQuery 的 document.ready 时，发现 document.ready 事件不起作用。这是因为 AngularJS 在路由切换时，并没有重新加载整个页面，而是通过 Ajax 请求加载对应的视图模板，然后将其插入到指定的区域。因此，document.ready 事件在页面不刷新的情况下，并不会被触发。

解决方案一：使用 AngularJS 的 $viewContentLoaded 事件

AngularJS 提供了 $viewContentLoaded 事件，它会在 ng-view 中的内容视图加载完成后触发。我们可以使用这个事件来执行我们需要在 document.ready 中执行的操作。

angular.module('myApp', [])
    .controller('myController', function(scope,window) {
        angular.element(window).on('load', function () {scope.on('viewContentLoaded', function() {
                // 在这里执行需要在 document.ready 中执行的操作
                // 例如初始化插件、绑定事件等
            });
        });

    });

通过上述代码，在 $viewContentLoaded 事件触发后，我们可以执行需要在 document.ready 中执行的操作。

解决方案二：使用 AngularJS 的 $timeout

除了使用 viewContentLoaded 事件外，我们还可以使用 AngularJS 的timeout 服务来模拟 document.ready 的效果。

angular.module('myApp', [])
    .controller('myController', function(scope,timeout) {
        $timeout(function() {
            // 在这里执行需要在 document.ready 中执行的操作
            // 例如初始化插件、绑定事件等
        });
    });

$timeout 服务会在指定的时间间隔后触发回调函数，这个时间间隔可以设为 0，即可以立即调用回调函数，相当于 document.ready 事件。

解决方案三：使用原生 JavaScript

如果不希望依赖 AngularJS 提供的事件或服务，我们还可以使用原生 JavaScript 来解决这个问题。

window.onload = function() {
    // 在这里执行需要在 document.ready 中执行的操作
    // 例如初始化插件、绑定事件等
};

在这种情况下，我们使用 window.onload 事件来确保页面全部加载完成后执行相应的操作。

总结

在使用 AngularJS 中的 ng-view 指令时，由于页面不刷新，导致 jQuery 的 document.ready 事件不起作用。为了解决这个问题，我们可以使用 AngularJS 的 viewContentLoaded 事件、timeout 服务，或者使用原生 JavaScript 的 window.onload 事件来替代 document.ready 的功能。根据具体的需求和项目情况，选择合适的解决方案即可。