title: Ember _ How to access to a controller action from a component controller
body: <p>I'm trying to add some outter functionality to an ember component . The component is the following one : </p>
  
  <p><strong>app / templates / programmers.hbs</strong></p>
  
  <pre><code>{{echo-hlabel-tf 
     id= "id-test-hlabel"
     class="class-test-hlabel-mio"
     label="Horizontal textfield"
     textValue="..."
     regExp="^([a-z0-9]{5})$"
     errorMsg="Text hasn't five characters"
     fnActionButtonClicked = "sayHello"
  }}
  </code></pre>
  
  <p>I'm playing with parameter <strong>'fnActionButtonClicked'</strong> . This parameter represents a function that it's executed, and it's not inside the functionality of the component ( like passing a javascript function as parameter ). I'm newbie, and I don't know exactly the ember way to do this . The template of the component is : </p>
  
  <p><strong>app / templates / components / echo-hlabel-tf.hbs</strong></p>
  
  <pre><code>&lt;div id="echo-hlabel-tf"&gt;
      &lt;span id="{{id}}-echo-hlabel-tf-label" 
            class="{{class}}-echo-hlabel-tf-hlabel"&gt;
      {{label}}
  &lt;/span&gt;
  &lt;span id="{{id}}-echo-hlabel-tf-value" 
        class="{{class}}-echo-hlabel-tf-value"&gt;
      {{input id='input-id' class='input-class' value=textValue
              focus-out = (action 'validateRegExp' textValue regExp) 
      }}
  &lt;/span&gt;
  &lt;span id="{{id}}-echo-hlabel-tf-error-msg" 
   class="{{class}}-echo-hlabel-tf-error-msg"&gt;
      &lt;p id='error-msg' class="error-msg"&gt;
          {{errorMsg}}
      &lt;/p&gt;
  &lt;/span&gt;
  
  &lt;div&gt;
      &lt;h2&gt;Testing passing functions to the component&lt;/h2&gt;
          &lt;input type="button" {{action "actionButtonClicked"}}/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see , at the bottom of the template, there's an input type="button" that it's binded with "actionButtonClicked" . The controller of the component is : </p>
  
  <p><strong>app / components / echo-hlabel-tf.js</strong></p>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.Component.extend({
     classNameBindings:['error'],
     error:false,
  
     actions: {
      validateRegExp(text,regExpStr,event){
          let regExpObj = new RegExp(regExpStr)
          if(regExpObj.test(text)){
              this.set('error',false);
          }else{
              this.set('error',true);
          }
      },
      actionButtonClicked(){
          console.log('Arrives to the component');
          var action = this.get('fnActionButtonClicked');
          console.log(action);
          // How can I call the function in another controller
          // With parameter fnActionButtonClicked name
      }
   }
  });
  </code></pre>
  
  <p>So , The parameter of the template <strong>'fnActionButtonClicked'</strong> (SayHello) will be retrieved in <strong>actionButtonClicked()</strong> via <strong>var action = this.get('fnActionButtonClicked');</strong> .</p>
  
  <p>So, at this point, comes the doubt . As I can't pass a javascript function as a parameter of a template (or at least, I think it's not the right way to do things ), I have created a controller <strong>'sampleController'</strong> to create the action <strong>'sayHello'</strong> ( See parameter fnActionButtonClicked value ) with the following code : </p>
  
  <p><strong>app / controllers / sample-controller.js</strong></p>
  
  <p>import Ember from 'ember';</p>
  
  <pre><code>export default Ember.Controller.extend({
     actions:{
      sayHello(){
          console.log("I'm saying hello this time");
      }
    }
  </code></pre>
  
  <p>});</p>
  
  <p>How can I , from <strong>app / components / echo-hlabel-tf.js:actionButtonClicked()</strong> execute the code of <strong>app / controllers / sample-controller.js : sayHello()</strong> ? How can I access from component controller to another controller ? Is this the right way in ember of achieving my goal ?</p>
  
  <p>Thanks in advance</p>