カスタム要素にある用紙ダイアログを切り替えますポリマー

Question

ポリマーとJavaScriptを使用して開発する場合にはかなり新しいですが、紙のダイアログを切り替える方法が一番良い方法ではないか、改善できると感じています。私はカスタム要素を作成し
エラーが私の-ダイアログと呼ばれる取得していますが、現在、私は、カスタム要素の外側からトグル（）関数を呼び出すようにしようと、それは私の作品：のいずれかから

<dom-module id="my-dialog"> 
    <template> 
    <style> 
     :host { 
     display: inline-block; 
     } 
    </style> 

    <paper-dialog id="popUp" with-backdrop on-iron-overlay-opened="patchOverlay"> 
     <!-- Dialog content --> 
     <h2>Hello World</h2> 
    </paper-dialog> 

    </template> 

    <script> 
    Polymer({ 
     is: 'my-dialog', 

    }); 
    </script> 
</dom-module> 

を私私は今、紙のボタンをクリックするとダイアログを開いて閉じたいと思っています。これはうまくいきますが、私が上で述べたように、私が実際に行っていることは本当にプロフェッショナルではないという気持ちがあります。

<dom-module id="my-profile-view"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 

    <paper-fab icon="create" id="myBtn" on-tap="toggleDialog"></paper-fab>   
    <my-dialog id="myDialog"></my-dialog> 

    </template> 

    <script> 
    Polymer({ 
     is: 'my-profile-view', 

     //Open dialog 
     toggleDialog: function() { 
     var dialog = this.shadowRoot.querySelector('#myDialog'); 
     var popUp = dialog.shadowRoot.querySelector('paper-dialog'); 
     popUp.toggle(); 
     }, 
    }); 
    </script> 
</dom-module> 

エラーmsg。

（プログラム）：5キャッチされない例外TypeError：私は私のコンソールで取得していますヌルのプロパティ 'removeAttribute'（無名関数）を読み取ることができません@（プログラム）：5（匿名関数）@（プログラム）：20

誰かが私のために物事をクリアすることができれば素晴らしいでしょう。そして、私が他に何ができるかをヒントにしてください。

Answer 1

第2の要素my-profile-viewは、最初の要素の内部ロジックを知りません。my-dialog。

代わりに、あなたのカスタマイズダイアログに公開方法（つまり、toggleDialog）が公開されている必要があります。

私-dialog.html <script>：

Polymer({ 
    is: 'my-dialog', 
    toggleDialog: function() { 
    this.$.popUp.toggle() 
    } 
}); 

この方法では、あなたの第二の要素によって呼び出される可能性があります。

私のプロファイル-view.html <script>：

Polymer({ 
    is: 'my-profile-view', 
    //Open dialog 
    toggleDialog: function() { 
    this.$.myDialog.toggleDialog() 
    } 
});