在 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>

但是，无论我做什么 - 我根本无法让它自动执行我的功能（当页面完全加载并且所有 data/elements 可用时）。

幸运的是，Stack Overflow 有很多关于页面完全加载的帖子，所以我尝试了一大堆，但其中 none 有效，它们都在页面仍然空白时触发了该功能。

这些是我尝试过的一些：

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

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

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

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

必须有某种方法可以在页面完全加载时触发某个功能....

Answer 1

您是否尝试使用正确的 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');
});

Answer 2

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

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

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

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

无论如何，您可以直接从您的控制器调用此函数。加载应用程序和控制器后将调用它。

Answer 3

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

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

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

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

Executing a function once the page is fully loaded in AngularJS

javascript

angularjs

function-call

angularjs-1.6