How can a button from an element call a function of another element

Question

I have an polymer element login:

<polymer-element name="quizzito-login" attributes="">
    <template>
        <style></style>
        <paper-shadow class="card" z="2">*****

      <paper-input-decorator label="Mail">
          <input id="Mail" is="core-input" name="Mail"/>
      </paper-input-decorator>

      <paper-input-decorator label="Mots de passe">
          <input id="password" is="core-input" name="j_password" type="password"/>
      </paper-input-decorator>

      <paper-button raised id="register" on-tap="{{registerTapped}}" class="register">S'enregistrer</paper-button>

      <paper-fab mini icon="done" class="button" title="done"></paper-fab>
      <quizzito-register-dialog on-register-tap="{{toogle}}"></quizzito-register-dialog>

    </paper-shadow>
    </template>
    <script>
        Polymer('quizzito-login', {
            created: function() {
                console.log("Module de login crée");
            },
        registerTapped: function(event, detail, sender) {
            this.fire('register-tap');
            }
        });
    </script>
</polymer-element>

And a register element who is a popup with input for register.

<polymer-element name="quizzito-register-dialog" attributes="">
    <template>
        <paper-action-dialog backdrop style="color: #00BCD4; width: 350px;" id="registerDialog" heading="S'enregistrer" transition="paper-dialog-transition-bottom">

        <paper-input-decorator label="Prénom" style="color: black;">
          <input id="name" is="core-input" name="name"/>
        </paper-input-decorator>
        <paper-input-decorator label="Nom">
          <input id="lastName" is="core-input" name="lastName" style="color: black;"/>
        </paper-input-decorator>
        <paper-dropdown-menu label="Votre classe" style="color: black; width:100%;">
            <paper-dropdown class="dropdown">
              <core-menu class="menu" style="color: black;">
                  <paper-item>304511 - Informaticien 1ère</paper-item>
                  <paper-item>304521 - Informaticien 2ème</paper-item>
                  <paper-item>304531 - Informaticien 3ème</paper-item>
                  <paper-item>304541 - Informaticien 4ème</paper-item>
              </core-menu>
            </paper-dropdown>
          </paper-dropdown-menu>
        <paper-input-decorator label="E-mail" style="color: black;">
          <input id="mail" is="core-input" name="mail"/>
        </paper-input-decorator>
        <paper-input-decorator label="Mots de passe" style="color: black;">
          <input id="pass" is="core-input" name="pass"/>
        </paper-input-decorator> 
        <paper-input-decorator label="Confirmation du mots de passe" style="color: black;">
          <input id="pass2" is="core-input" name="pass2"/>
        </paper-input-decorator>

        <paper-button dismissive="">Annuler</paper-button>
        <paper-button affirmative="" default="">Confirmer</paper-button>

        </paper-action-dialog>
    </template>
    <script>
        Polymer('quizzito-register-dialog', {
            created: function() {
                console.log("Module de registre crée");
            },
            toogle: function(event, detail, sender) {
            console.log("TOOOOGLE");
  }
        });
    </script>
</polymer-element>

Now, I want that when in login, paper-button with the id register is clicked, that start the function toogle in the register element... but actually, it just don't work...

Can you help me? Thank you :)

Answer 1

Wrong scope for 'toggle'. 'quizzito-login' must have 'toggle' function in on-register-tap="{{toogle}}" case. Why you don't call 'quizzito-register-dialog' function directly? Get 'quizzito-register-dialog' element and call toogle.

<polymer-element name="quizzito-login" attributes="">
<template>
    <style></style>
    <paper-shadow class="card" z="2">

  <paper-input-decorator label="Mail">
      <input id="Mail" is="core-input" name="Mail"/>
  </paper-input-decorator>

  <paper-input-decorator label="Mots de passe">
      <input id="password" is="core-input" name="j_password" type="password"/>
  </paper-input-decorator>

  <paper-button raised id="register" on-tap="{{registerTapped}}" class="register">S'enregistrer</paper-button>

  <paper-fab mini icon="done" class="button" title="done"></paper-fab>
  <quizzito-register-dialog id="registerDialog" on-register-tap="{{toogle}}"></quizzito-register-dialog>

</paper-shadow>
</template>
<script>
    Polymer('quizzito-login', {
        created: function() {
            console.log("Module de login crée");
        },
    registerTapped: function(event, detail, sender) {
    this.$.registerDialog.toogle();
        }
    });
</script>