一旦页面在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>

但是，无论我做什么 - 我根本无法自动执行我的函数（当页面满载并且所有数据/元素可用时）。

Lucky Me 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事件？

Angular＆lt;1.6.x

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

Angular> = 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*/ });