訪問使用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的元素

回答

相關問題