3

クライアント キャンバス描画アプリに ng-view で ng-route を使用しています。描画コードは、個別の非角度 js ファイルにあります。私は置く必要があります

<div id="container"></div>
<p id="json"></p>

と

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all.js"></script>
<script type="text/javascript" src="/public/canvas/projectTemplate.client.canvas.js"></script>

ターゲット ng-view で。

問題は、スクリプトを ng-view html ファイルに追加できないことです。（ブラウザのデバッグウィンドウには表示されません）

scripts親htmlファイル（を含むng-view）を入れてみ#container and #jsonましたがng-view（このページだけがこれらの2つの要素を必要とするため、必要です）、parentNode is not foundその時点でng-view（#container and #json）がなかったので、というエラーがありますロードされている間、ロードさscriptsれています

編集：

サブページhtmlでこれを試しました：

<p id="p">this is text</p>

<script type="text/javascript">

    (function() {
        var p = document.getElementById('p')
        p.innerText = 'changed by js'

    })()

</script>

しかし、それは機能していません

4

3 に答える 3

1

<script>どのような問題が発生しているのか正確にはわかりませんが、問題なくタグをテンプレートに読み込むことができます。最下部にある限り、実行時に DOM 要素を使用できます。

次のようなテンプレートがあるとします。

<div class="row">
  <div class="col-sm-12">
    <h1 id="title_header"></h1>
    <script src="dynamic-element.js" type="text/javascript"></script>
  </div>
</div>

<h1>が含まれている要素があることがわかりますid="title_header"。このテンプレートに読み込まれるスクリプトは次のようになります。

(function(){

  var h1 = document.getElementById('title_header');

  h1.innerText = "I was created dynamically by plain old JavaScript";
  h1.style.color = 'red';

}());

結果は<h1>、スクリプトによって動的に赤いテキストが取り込まれます。

しかし、私の言葉を鵜呑みにしないでください。例を参照してください。

于 2015-02-09T22:27:04.287 に答える
1

サブページに JavaScript ファイルを含める既存の方法はありません。(Josh のソリューションが実際のサーバーで機能するとは思わない)。

カスタム ディレクティブを使用する代わりに (これはうまくいくかもしれませんが面倒です)、build in 属性を使用しない理由はありません。

これを試して：

  1. (サーバーから) メイン ページにカスタム JavaScript ファイルを含めます。
  2. キャンバス用に別の html ファイルを作成し、そこに #container と #json を配置します
  3. サブページに、キャンバスの html を含めます <div ng-include src="'/public/canvas/canvas.html'" onload="canvasReady()"></div>
  4. $scope.canvasReady() 関数内でカスタム JavaScript の開始関数を呼び出す
于 2015-02-13T10:45:06.180 に答える
1

スクリプト参照をメイン ページの html 自体に配置し、特定の html ファイルからそれらをロードしないでください。そのページ内に html のみを配置します。#containerまた、初期化時に js からキャンバス関数を呼び出さないでください。 &が見つかりません#json。

それらを機能させるには、そのディレクティブ要素がビューでレンダリングされるたびに、ディレクティブから呼び出す必要があります。

HTML

<render-canvas>
  <div id="container"></div>
  <p id="json"></p>
</render-canvas>

指令

app.directive('renderCanvas', function() {
    return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment         
        templateUrl: 'mytemplate.html',
        link: function($scope, element, attrs) {
            // here you can intialize your canvas code..
            // you will find all element 
            var container = element.finf('#container');
            var json = element.finf('#json');
            //now you have both the elements, you can play with those element
            //means you can initilize your canvas plugin here
            //don't initialize it on canvas.js. load you will never find target element.
        }
    }
});

これがあなたを助けることを願っています。ありがとう。

于 2015-02-09T14:15:27.080 に答える