在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);黑客，但对我来说这有点像放弃:-D

当页面完全加载时，必须有一些方法来启动一个功能....

Answer 1

您可能想要使用ng-init指令：

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

定义此功能是您的控制器：

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

---

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

Answer 2

你尝试过使用正确的angular活动吗？

角度<1.6.X

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

角度> = 1.6.X

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

Answer 3

你有没有尝试过Angular JS之外的东西？

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

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