访问使用ng-bind-html添加到DOM的元素

这可能已经被回答过了，但我已经尝试了48个小时，现在找到了与现在运气的答案。发布这是最后的手段。访问使用ng-bind-html添加到DOM的元素

所以我有这样的俄罗斯方块克隆，它的工作原理是在这里看到：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(), ...};

使用萤火虫，我可以看到所有添加的元素和脚本DOM。我还假设，作为单页已经加载，我不能在关闭后使用window.onload = jetris.startGame;“;” var jetris = {};

1）我试着把alert("hello");作为倒数第二行（就在startGame的调用之前）并尝试用萤火虫进行加速。看起来html5jetris.js在加载时没有运行。

2）我试图通过地址栏直接访问画布与编号javascript:getElementByID("gamewindow").innerHTML = "hello"; 没有成功;这是ng-bind-html在1-1.5秒之后执行的几秒钟，它需要角度来加载它。 3）如果我在我的index.php中预先强制加载所有的js，那么firefox将会遍历它。但我只想在需要时加载JavaScript。这不能解决不能通过id访问画布。

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

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

任何想法？

这里的指令：

.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窗口中工作得很好。

来源

2016-05-29 Jon Crawford

您可以创建一个指令来处理加载等。指令构造器允许你访问元素，通过它你可以找到脚本使用的元素 – MiltoxBeyond

我已经添加了用于加载HTML的指令。我用它来加载我的所有内容到一个div。我还添加了我的jetris.php，以便您可以看到我如何发送数据。这是非常动态的，但我猜想在我设置的内容对象中，我可以添加一个可用于指定特定指令的变量。我正在考虑上传我的网站，以便您可以看到它的要点。 –

此外，我正在努力使其具有高度的可定制性，并最终被其他不擅长编码的人使用。所以最后我希望能够通过数据库和管理员登录添加新页面。代码将被上传，像jsfiddle和应用程序，永远不会掉到网站的代码。所以不得不添加一个关闭指令将不理想。我已经将我得到的东西上传到我的主机来链接，但他们遇到了与PDO有关的问题，我不想通过将其重新编码到mySQLi来倒退。对不起，您需要等一会才能看到这个链接。 –

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

要加载HTML格式化字符串到DOM我用乔尔（谢谢！）源$编译指示：AngularJS directive in ng-bind-html

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

然后我改变的onload在我的Java游戏Jetris到：var externalJS = { run: function() { window.jetris.startGame(); } };

这样我就不必重新编码我的角度的应用程序时，我想添加一个新的游戏或其他JavaScript应用程序，这允许我的应用程序检查是否externalJS是未定义，如果被定义，则执行externalJS.run（）;.如果应用程序的div窗口关闭，重新打开时它将有效地重新启动它。

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

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

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

这里是一个项目工作Alpha的链接，所有问题都在这里解决。您可以拖动窗口和图标，像普通桌面一样打开多个窗口，除非像使用Jetris设置oneInstance标志，并且您可以玩Jetris！一探究竟！

Triva：我创建了一个缩写Akadine作为一个在线句柄，程序在几年前制作了随机可读的单词（不是真实的，只是可读的），并且最近才推出了Advanced Kiosk和Dynamic Internet Navigation Environment。

来源

2016-06-01 13:55:34

访问使用ng-bind-html添加到DOM的元素

回答

相关问题