onclick = "animated.open（）"がポリマー要素内で機能しない

Question

onclick = "animated.open（）"に関する問題があります。私はpaper-dialog要素を実装しようとしていますが、私はそのダイアログをpaper-fabをクリックして開きたいと思っています。

<paper-fab icon="create" onclick="animated.open()"></paper-fab> 

<paper-dialog id="animated" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop> 
    <h2>Dialog Title</h2> 
    <p>Some text here</p> 
</paper-dialog> 

これは動作するはずpaper-dialog docsによると、しかし、それはしていません。クリックすることで、紙-FABエラーがコンソールにポップアップ表示：

Uncaught ReferenceError: animated is not defined

私の仮定は、そのすべてがカスタム要素の内側にあるので、それが動作しないということでしょう。誰かが回避策を知っていますか？私はすでにaddEventListenerを使用しようとしましたが、これはどちらかと思われませんでした。

事前にどうもありがとう、
ステファン

Answer 1

あなたは正しくpaper-dialog要素にアクセスしていないためです。 paper-dialog要素への参照を取得するpaper-fab要素のon-clickイベントから呼び出される関数を作成する必要があります。詳細については、hereを参照してください。例えば

：

<paper-fab icon="create" on-click="openDialog"></paper-fab> 

その後、openeDialogあなたの関数を定義します。ここでは

openDialog: function() { 
    this.$.animated.open(); 
} 

EDITはこれをデモplnkrです。