onclick =“animated.open（）”不工作聚合物元素

Question

我有关于onclick =“animated.open（）”的问题。我尝试实现纸质对话框元素，并且希望在点击纸厂之后打开对话框。

<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元素。您需要创建一个从on-click事件调用的函数paper-fab元素，该元素获取对paper-dialog元素的引用。有关更多信息，请参阅here。

例如：

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

然后定义你的函数openeDialog：

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

编辑这里是一个plnkr demoing这一点。