Rob*_*ton 26 javascript angularjs adobe-edge angular-ui-router
我正在开展一个项目,该项目将使用Adobe Edge Animate创建的多个动画合并到一个AngularJS应用程序中.这个想法是这些动画将作为游戏的视觉效果,我将根据玩家的输入控制构图.为了达到这个阶段需要进行一些实验,但所有这些都是完美的.
每当玩家选择退出当前视图并再次访问时,我的问题就会开始.由于某种原因,这会导致Adobe Edge Animate Javascript API出现问题,并且无法加载合成.
基本上,我可以加载一次合成,但不能再加载.每当我尝试第二次加载合成时,我都会收到以下Javascript错误...
Uncaught TypeError: Cannot read property 'stage' of undefined edge.5.0.1.js:4872
Uncaught TypeError: Cannot read property 'stage' of undefined edge.5.0.1.js:4519
我目前正在控制器内直接加载合成,如下所示......
.controller('GameTest', function($scope, $state) {
AdobeEdge.loadComposition('edge-animate/GameTest', 'GameTest', {
scaleToFit: "width",
centerStage: "none",
minW: "0",
maxW: "undefined",
width: "2048px",
height: "1134px"
}, {dom: [ ]}, {dom: [ ]});
})
我也禁用了这个州的缓存......
.state('game-test', {
cache: false,
url: "/games/test",
controller: 'GameTest',
templateUrl: 'templates/games/test.html'
})
欢迎所有建议,并感谢任何帮助!
谢谢
更新:我已经找到了解决方案!希望...
如果浏览器再次处理相关*_edge.js的内容,则问题似乎得到解决.由于这些注入<head>时AdobeEdge.loadComposition(...)被调用(通过yepnope),并且似乎没有要问yepnope的任何方法来重新加载注入的JavaScript,我已经写了一个小服务角度,我可以用它来处理这个代替标准AdobeEdge.loadComposition(...)功能.它本质上是一个预先进行相关检查的包装器.
.service('$AdobeEdge', function() {
var head = document.getElementsByTagName('head')[0],
scripts = head.getElementsByTagName('script');
return {
loadComposition: function(projectPrefix, compId, opts, preloaderDOM, downLevelStageDOM) {
// Determine the filename for our project
var projectFile = projectPrefix + '_edge.js';
var newScript = null;
// Iterate through each script tag in the header to search for our file
angular.forEach(scripts, function(script, index, scripts) {
// Does the script src tag end with our project filename?
if (script.src.substr(script.src.length - projectFile.length) == projectFile) {
// It's already loaded! Let's go about removing it and injecting a fresh script tag...
script.remove();
newScript = document.createElement('script');
newScript.setAttribute('type', 'text/javascript');
newScript.setAttribute('src', script.src);
head.insertBefore(newScript, scripts[0]);
// Let's also delete the composition within the Adobe Edge API so that events
// like 'compositionReady' are fired again when we call loadComposition()
delete AdobeEdge.compositions[compId];
}
});
// Ultimately we always need to call loadComposition() no matter what
AdobeEdge.loadComposition(projectPrefix, compId, opts, preloaderDOM, downLevelStageDOM);
}
}
})
使用此方法,我可以在相关控制器中调用此服务,并以与正常类似的方式加载组合.在这种特殊情况下......
.controller('GameTest', function($scope, $state, $AdobeEdge) {
$AdobeEdge.loadComposition('edge-animate/GameTest', 'GameTest', {
scaleToFit: "width",
centerStage: "none",
minW: "0",
maxW: "undefined",
width: "2048px",
height: "1134px"
}, {dom: [ ]}, {dom: [ ]});
});
到目前为止,它一直很好用!我将用它来构建我们项目中的其余游戏并发布我遇到的任何问题.
希望这可以为别人带来很多心痛!
罗布·辛顿 的回答:
如果浏览器再次处理相关 *_edge.js 的内容，问题似乎就得到了解决。由于这些被注入到<head>whileAdobeEdge.loadComposition(...)调用中（通过 yepnope），并且似乎没有任何方法要求 yepnope 重新加载注入的 Javascript，所以我为 Angular 编写了一个小服务，我可以用它来处理这个问题标准AdobeEdge.loadComposition(...)功能。它本质上是一个包装器，将事先进行相关检查。
.service('$AdobeEdge', function() {
var head = document.getElementsByTagName('head')[0],
scripts = head.getElementsByTagName('script');
return {
loadComposition: function(projectPrefix, compId, opts, preloaderDOM, downLevelStageDOM) {
// Determine the filename for our project
var projectFile = projectPrefix + '_edge.js';
var newScript = null;
// Iterate through each script tag in the header to search for our file
angular.forEach(scripts, function(script, index, scripts) {
// Does the script src tag end with our project filename?
if (script.src.substr(script.src.length - projectFile.length) == projectFile) {
// It's already loaded! Let's go about removing it and injecting a fresh script tag...
script.remove();
newScript = document.createElement('script');
newScript.setAttribute('type', 'text/javascript');
newScript.setAttribute('src', script.src);
head.insertBefore(newScript, scripts[0]);
// Let's also delete the composition within the Adobe Edge API so that events
// like 'compositionReady' are fired again when we call loadComposition()
delete AdobeEdge.compositions[compId];
}
});
// Ultimately we always need to call loadComposition() no matter what
AdobeEdge.loadComposition(projectPrefix, compId, opts, preloaderDOM, downLevelStageDOM);
}
}
})
使用此方法，我可以简单地在相关控制器中调用此服务，并以与正常类似的方式加载组合。在这种特殊情况下...
.controller('GameTest', function($scope, $state, $AdobeEdge) {
$AdobeEdge.loadComposition('edge-animate/GameTest', 'GameTest', {
scaleToFit: "width",
centerStage: "none",
minW: "0",
maxW: "undefined",
width: "2048px",
height: "1134px"
}, {dom: [ ]}, {dom: [ ]});
});
到目前为止，效果非常好！我将用它来构建我们项目中的其余游戏，并发布我遇到的任何问题。
希望这可以避免其他人的心痛！
| 归档时间： |
|
| 查看次数： |
2736 次 |
| 最近记录： |