Javascript 在AngularJS服务中使用window.onload
我正在使用AngularJS 1.6创建一个依赖于一些图像的游戏。在运行任何控制器之前,游戏在很大程度上与Angular分开,并由服务实例化。我希望游戏由一个服务实例化,这样我就可以将它公开给其他控制器,这些控制器以一定的容量与游戏交互。我使用$window.onload,但它只在页面首次加载时起作用。当我刷新页面时,事件不会触发,可能是因为浏览器正在从缓存中获取图像 我已经考虑过使用document.ready,但当图像加载速度不够快时,这偶尔会导致问题 我尝试过jQuery、vanilla JS和Angular的语法:Javascript 在AngularJS服务中使用window.onload,javascript,angularjs,onload,Javascript,Angularjs,Onload,我正在使用AngularJS 1.6创建一个依赖于一些图像的游戏。在运行任何控制器之前,游戏在很大程度上与Angular分开,并由服务实例化。我希望游戏由一个服务实例化,这样我就可以将它公开给其他控制器,这些控制器以一定的容量与游戏交互。我使用$window.onload,但它只在页面首次加载时起作用。当我刷新页面时,事件不会触发,可能是因为浏览器正在从缓存中获取图像 我已经考虑过使用document.ready,但当图像加载速度不够快时,这偶尔会导致问题 我尝试过jQuery、vanilla
$(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();
};
});
将
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()
。在应用程序引导后,不能添加控制器、服务、指令等
注意:是angular.element(document).ready(f)的别名,您在这里描述的内容与angular使用的大多数设计原则背道而驰。你可能会发现描述你试图解决的问题比描述那些不合适的解决方案要好。“游戏在很大程度上是与角度无关的”这句话完全没有道理;angular绑定或不绑定……问题不在于游戏,而在于如何启动window.onload。如果这会分散我的注意力,也许我应该把它删掉。我刚才提到这个游戏是为了解释我有一些图像,我想在执行一段代码之前完全加载这些图像。你知道我怎样才能让window.onload可靠地发射吗?但这就是问题所在,不是游戏让人分心,而是在游戏环境中没有意义的要求。Angular没有“延迟加载直到其他事情发生”(比如加载图像)的机制,因为一般来说,它不尝试直接操纵DOM,也不关心DOM中不知道的事情,因为Angular逻辑不应该基于DOM的状态。谢谢,这很有意义。