Question

我使用AngularJS 1.6来创建依赖于某些图像的游戏。在运行任何控制器之前，游戏大部分与Angular分开，并由服务实例化。我希望游戏能够通过服务进行实例化，以便我可以将其暴露给其他控制器，这些控制器会以某种身份与游戏进行交互。我使用$ window.onload，但它仅在页面首次加载时有效。当我刷新页面时，事件不会触发，大概是因为浏览器从缓存中获取图像。

我已经考虑过使用document.ready，但是当图片没有足够快地加载时，这偶尔会导致问题。

我尝试过jQuery，vanilla JS和Angular的语法：

$(window).on('load', function() {});
$window.onload = function();
angular.element($window).on('load', function() {});

任何建议都将不胜感激。这就是我的代码基本上的样子。

// Game Service (game state, game logic and game loop)
gameApp.service('theGame', function($log, $document, $window, 
$location, $timeout, $interval) {


    $window.onload = function() {
        // Initialize a new Game object
        var game = new Game();
        game.initGame();
    };

});

Answer 1

将window.onload置于AngularJS服务中是将购物车放在马前。 AngularJS在onload事件后加载。

相反，使用angular.element加载游戏，然后手动引导AngularJS：

angular.element(function() {
    var game = new Game();
    game.initGame();
    angular.module("myApp").value("theGame", game);
    angular.bootstrap(document, ['myApp']);
});

为避免自动初始化，请记住省略ng-app指令。

手动初始化

如果您需要更多地控制初始化过程，可以使用手动引导方法。

在加载或定义模块后，您应该致电angular.bootstrap()。在应用程序引导后，您无法添加控制器，服务，指令等。

— AngularJS Developer Guide - Bootstrap (Manual Initialization)

注意：angular.element(f)是angular.element(document).ready(f) ¹

的别名

在AngularJS服务中使用window.onload

1 个答案:

手动初始化