これはおそらく以前は答えられていましたが、私は現在運が良ければ48時間後に答えを探しました。これを掲示することは最後の手段です。ng-bind-htmlでDOMに追加された要素へのアクセス
だから私はこのテトリスクローンを持っており、ここに見られるように、それは動作します：私は、全体を再コーディングしています
http://www.crawfordcomputing.com/AkadineWebOS/
：http://www.crawfordcomputing.com/portfolio/Jetris.php
しかし、それは、この単一ページの角アプリでは動作しません。 AngularJSのシングルページアプリにすることができます。この目的のために、ng-bind-htmlを介してhtmlを読み込み、コンパイルディレクティブはAngularJS directive in ng-bind-htmlにあります。
私が拘束しているhtml文字列は正確です：編集：キャンバスを子ノードにしようとしましたが、うまくいかなかった。
必要なスクリプト<div><canvas id='gamewindow' width='780px' height='560px'></canvas></div>は、ここで見つける機能を経由してロードされます。Single page application - load js file dynamically based on partial view
注：放火犯を使用してvar jetris = { startgame: function(), ...};
、私はすべての添加元素とスクリプトを見ることができます：html5jetris.jsは実際にはオブジェクトでありますDOM。私はまた、閉じた後にwindow.onload = jetris.startGame;を使用することができない単一のページが既にロードされていると仮定しています。 var jetris = {};
1）私はalert("hello");を最後の行（startGameの呼び出しの直前）に置いてみました。そして、firebugでステップアップを試みました。 html5jetris.jsがロードされている間は実行されていないようです。
2）アドレスバーから直接idでキャンバスにアクセスしようとしました。javascript:getElementByID("gamewindow").innerHTML = "hello"; 成功しませんでした。これは、ng-bind-htmlが1-1.5秒を超えて実行された後、数秒後にロードされました。
3）私がindex.php内のすべてのjをあらかじめemptivlyロードすると、firefoxがそれを処理します。しかし、私は必要な時だけjavascriptをロードしたい。これは、IDでキャンバスにアクセスできないことを修正しません。
4）それによって、Jetrisが動作し、AngularJSによって動的にロードされません。
注：JetQueryは、Angularの場合でもjQueryを必要としません。これは、自分の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-windowsではうまく動作します。
ロードなどを処理するためのディレクティブを作成できます。ディレクティブconstrutorを使用すると、使用するスクリプトの要素を見つけることができる要素にアクセスできます。 – MiltoxBeyond
HTMLを読み込むために使用するディレクティブを追加しました。私はこれを使ってすべてのコンテンツをdivにロードします。私はjetris.phpを追加して、データの送信方法を確認することもできます。これは非常に動的ですが、私が設定したコンテンツオブジェクトでは、特定のディレクティブを指定するために使用できる変数を追加できます。私は自分のウェブサイトに持っているものをアップロードすることを検討しているので、その要点を見ることができます。 –
また、私はこれを高度にカスタマイズ可能にしようとしており、究極的には精通しているコーディングではない他の人が使用するようにしています。だから、私はデータベースと管理者のログインを使って新しいページを追加できるようにしたい。 jsfiddleのようにコードがアップロードされ、作成されたアプリケーションはウェブサイトのコードに決して落とされません。したがって、指示に1つを追加することは理想的ではありません。私はリンク先のホストにアップロードしたものの、PDOに問題があり、mySQLiに再コーディングして後ろに行きたいとは思わない。申し訳ありませんが、そのリンクを少し待たなければなりません。 –