Question

这可能已经得到了回答，但我现在已经尝试了48小时，现在找到一个幸运的答案。发布这是最后的手段。

所以我有这个俄罗斯方块克隆，它的工作方式如下所示：http://www.crawfordcomputing.com/portfolio/Jetris.php

但它在这个单页角应用程序中不起作用：

http://www.crawfordcomputing.com/AkadineWebOS/

我正在将整个网站重新编码为AngularJS单页应用。为此，我通过ng-bind-html和在此处找到的编译指令加载html：AngularJS directive in ng-bind-html。

我绑定的html字符串正好是：编辑：尝试将canvas设为childnode，但无效。<div><canvas id='gamewindow' width='780px' height='560px'></canvas></div>

必要的脚本通过此处的函数加载：Single page application - load js file dynamically based on partial view

注意：html5jetris.js实际上是一个对象：var jetris = { startgame: function(), ...};

使用firebug，我可以在DOM中看到所有添加的元素和脚本。我也假设已经加载了一个页面，我不能在结束后使用window.onload = jetris.startGame;“;” var jetris = {};

1）我尝试将alert("hello");作为第二行到最后一行（就在调用startGame之前）并尝试逐步使用firebug。看来html5jetris.js在加载时没有运行。

2）我尝试使用javascript:getElementByID("gamewindow").innerHTML = "hello";直接从地址栏通过ID访问画布没有成功;这是在ng-bind-html执行了1-1.5秒之后几秒钟，加载它需要角度。

3）如果我在我的index.php中预先加载了所有js，那么firefox将逐步执行它。但我只想在需要时加载javascript。这不能解决无法通过id访问画布的问题。

4）通过它自己，Jetris工作，只是没有由AngularJS动态加载。

注意：Jetris不需要jQuery，即使它适用于Angular。这取决于我自己的utitlty.js（作为javascript类的一部分，转换为object：var U = {};）和我自己的html5canvas.js（再次，var canvas = {};）因为这些是对象，所以变量在它们不应该与任何jQuery或Angular碰撞。

有什么想法吗？

这是指令：

.directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) { //taken from Joël (Thank you!) source: https://stackoverflow.com/questions/26594153/angularjs-directive-in-ng-bind-html
    scope.$watch(
        function(scope) {
            // watch the 'compile' expression for changes
            return scope.$eval(attrs.compile);
        },
        function(value) {
            // when the 'compile' expression changes
            // assign it into the current DOM
            element.html(value);

            // compile the new DOM and link it to the current
            // scope.
            // NOTE: we only compile .childNodes so that
            // we don't get into infinite loop compiling ourselves
            $compile(element.contents())(scope);
        }
    );
};

}]）

Jetris.php：

    <?php //Jon Crawford AkadineWebOS pages/jetris.php 

//describe window
$window = array();
$window['content'] = "<canvas id='gamewindow' width='780px' height='560px'></canvas>";
$window['title'] = "Jetris";
$window['x'] = 20;
$window['y'] = 250;
$window['id'] = 900;
$window['requireJS'] = array();
$window['requireJS'][0] = "scripts/html5Jetris.js";
$window['requireJS'][1] = "scripts/html5Canvas.js";
$window['requireJS'][2] = "scripts/utilities.js";

echo json_encode($window);
?>

这会加载到带有标题栏的div和可拖动的退出按钮。我的菜单系统就是图标。我的AkadineWebOS看起来像普通桌面。我有一个about.php和一个welcome.php，在我的div窗口中运行得很好。

Answer 1

好的，所以这是一个特例，我可能没有澄清我的问题。以下是我用来实现目标的步骤。

要将HTML格式化字符串加载到DOM，我使用了Joël的$ compile指令（谢谢！）来源：AngularJS directive in ng-bind-html

为了加载外部依赖脚本文件，我使用了Ben Thielker的加载脚本函数（谢谢！）来源：Single page application - load js file dynamically based on partial view

然后我将我的Java游戏Jetris中的onload更改为：var externalJS = { run: function() { window.jetris.startGame(); } };

因此，每当我想添加新游戏或其他javascript应用程序时，我都不必重新编码我的角度应用程序，这允许我的应用程序检查var externalJS是否未定义，如果已定义，则执行externalJS。跑（）;。如果应用程序的div窗口关闭，这将在重新打开时有效地重新启动它。

现在，由于所有内容都是使用Angular的HTTP模块加载的，因此您必须等待Angulars承诺完成所有要加载的内容。如果我尝试很快运行它，我会得到一个空白的窗口，没有游戏。为此，我使用

setTimeout(function() {
if (typeof externalJS != 'undefined'){
    externalJS.run();
}},750);

在HTTP模块的successCallback中给它一些时间。

这是项目工作Alpha的链接，所有问题都在这里解决了。您可以拖动窗口和图标，像普通桌面一样打开多个相同的窗口，除非像Jetris一样设置oneInstance标志，你可以玩Jetris！看看这个！ AkadineWebOS

Triva：我创建了首字母缩略词Akadine作为一个在线句柄，其程序在几年前制作了随机可读的单词（不是真实的，只是可读的），并且最近刚出现了Advanced Kiosk和动态互联网导航环境。

使用ng-bind-html

1 个答案: