onclick =“animated.open（）”在Polymer elements

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这应该有效，但事实并非如此。通过单击paper-fab，控制台中会弹出一个错误：

  

未捕获的ReferenceError：未定义动画

我的假设是它不起作用，因为所有这些都在自定义元素中。有人知道解决方法吗？我已经尝试使用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演示此内容。