2016-08-18 3 views
0

AngularJSを使用しないので、issue on my Github projectを投稿したユーザーもいます。それがリンクされている場合にのみ機能しますKUTE.jsとして、AngularJSで文書を準備するときにボタンをクリックするアニメーションをスケジュールする2

AngularJSはそれをしない問題は、私は理解して、文書内のものは、レンダリングのですが、私のスクリプトKUTE.jsはAngularJSで定義された要素がDOMにすでにあることを期待します<body>の末尾に入力します。

可能な解決策

私は適切な実行順序を持つネイティブHTML5のスクリプトだ方法で、コードの実行を注文する方法が必要:

  • HTML
  • をレンダリング/
  • AngularJSの実行をレンダリング
  • JS実行(KUTE.js)

ここのコードエディタではAngularのものはサポートされていないため、here's a plunkerに問題があります。

答えて

1

AngularがDOMをレンダリングして相互作用する方法は、Angularがそのコアでどのように機能するかに本質的であり、実際には何もできません。

とにかく、アニメーションがトリガーされたときにライブラリが要素を見つけることができないという問題はありません。 Tweenオブジェクトのconsole.logの_el: pathアイテムは、矩形要素を正しく指しています。 Element not found or incorrect selector: pathエラーは、アプリケーションのロード時に何らかの理由で呼び出されたselector()関数によってスローされます。あなたのライブラリが、ロード時にAngularがそれらをDOMに接続する機会を得る前に、直ちに特定の要素を探しているなら、それはうまくいかないでしょう。

これらのことがすべて言われて、私はthe Plunker to workを手に入れることができました。 selector()関数がロード時に実行されているのは、DOM上のsvg要素を探しているからです。 index.htmlの本体に空のパスを持つダミーのsvgを配置すると、セレクタエラーがスローされなくなります。アニメーションをトリガーするためにボタンをクリックすると、Angularコンポーネントテンプレートの内部にあるパスがIDで識別されます(これまでに見つかったものと同じsvgであるかどうかは関係ありません)。アニメーション。

+0

私はこの解決策で何ができるか見てみましょう。どうもありがとうございます。 – thednp

+0

OK問題を見つけて修正しました。プラグインは '.selector()'メソッドを必要としないところで使っていました。単にその目的のために 'querySelector()'を使うだけでした。 https://github.com/thednp/kute.js/commit/1d153c363adbef8d1fc7e01dc272501899816daf – thednp

関連する問題