AngularJS中页面完全加载后执行函数

Question

我希望在页面完全加载后立即执行此函数。

vm.pointInvoice = () => {   
    if ($stateParams.property == "INVOICE") {
        vm.invoiceEdit($stateParams.checkin)
        vm.invoiceFocus = true;
        vm.receiptFocus = false;
    }
}

如果我把这个函数放在一个按钮上（只是为了测试），一切都能完美工作。

<button ng-click="vm.pointInvoice()">OPEN AND POINT TO INVOICE</button>

但是，无论我做什么 - 我都不能使它自动执行我的功能（当页面完全加载并且所有数据/元素可用时）。

幸运的是，Stack Overflow有很多关于页面完全加载的帖子，我尝试了很多，但没有一个有效，它们在页面还是空白的时候就会触发函数。

这些是我尝试过的一些方法:

$scope.$on('$viewContentLoaded', function(){
    debugger;
});

angular.element(document).ready(function () {
    debugger;
});

$scope.$on('$stateChangeSuccess', function () {
    debugger;
});

所以我唯一剩下的想法是做一些丑陋的 setTimeout(function(){ vm.pointInvoice() }, 3000); hack，但对我来说这有点像放弃 :-D

一定有某种方法可以在页面完全加载时触发一个函数....

- torbenrudgaard

Answer 1

您可以使用ng-init指令：

<div ng-init="init()">...</div>

在你的控制器中定义这个函数：

$scope.init = function() {
    alert("Page is fully loaded!);
}

---

无论如何，您都可以直接从控制器调用此函数。一旦应用程序和控制器加载完成，它将被调用。

- Mistalis

---

我要试一试。 - torbenrudgaard

我把它添加到需要执行函数并进行操作的表中 - 它成功了！！非常感谢@Mistralis！！ <table class="book-table book-table-gray" ng-if="vm.invoiceRecord[0]._id" ng-cloak="" ng-init="vm.pointInvoice()"> - torbenrudgaard

Answer 2

你尝试使用正确的 angular 事件了吗？

Angular < 1.6.X

angular.element(document).ready(function () {
    alert('page loading finshed');
});

Angular >= 1.6.X

angular.element(function () {
    alert('page loading finshed');
});

- rakwaht

---

是的，我已经尝试过了，但由于某种原因，它会在页面仍然为空白时触发。 - torbenrudgaard

Answer 3

你有尝试过 Angular JS 以外的东西吗？

$(document).ready(function(){ /*code*/ }); //with jQuery

document.addEventListener('DOMContentLoaded', function(){ /*code*/ });

- Luiz Paulo