Ember _ How to access to a controller action from a component controller

Question

I'm trying to add some outter functionality to an ember component . The component is the following one :

app / templates / programmers.hbs

{{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"
}}

I'm playing with parameter 'fnActionButtonClicked' . 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 :

app / templates / components / echo-hlabel-tf.hbs

<div id="echo-hlabel-tf">
    <span id="{{id}}-echo-hlabel-tf-label" 
          class="{{class}}-echo-hlabel-tf-hlabel">
    {{label}}
</span>
<span id="{{id}}-echo-hlabel-tf-value" 
      class="{{class}}-echo-hlabel-tf-value">
    {{input id='input-id' class='input-class' value=textValue
            focus-out = (action 'validateRegExp' textValue regExp) 
    }}
</span>
<span id="{{id}}-echo-hlabel-tf-error-msg" 
 class="{{class}}-echo-hlabel-tf-error-msg">
    <p id='error-msg' class="error-msg">
        {{errorMsg}}
    </p>
</span>

<div>
    <h2>Testing passing functions to the component</h2>
        <input type="button" {{action "actionButtonClicked"}}/>
</div>
</div>

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 :

app / components / echo-hlabel-tf.js

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
    }
 }
});

So , The parameter of the template 'fnActionButtonClicked' (SayHello) will be retrieved in actionButtonClicked() via var action = this.get('fnActionButtonClicked'); .

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 'sampleController' to create the action 'sayHello' ( See parameter fnActionButtonClicked value ) with the following code :

app / controllers / sample-controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
   actions:{
    sayHello(){
        console.log("I'm saying hello this time");
    }
  }

});

How can I , from app / components / echo-hlabel-tf.js:actionButtonClicked() execute the code of app / controllers / sample-controller.js : sayHello() ? How can I access from component controller to another controller ? Is this the right way in ember of achieving my goal ?

Thanks in advance

Answer 1

Instead of sample-controller.js , you need to create controller for the specific route programmers. so create app / controllers / programmers.js file,

export default Ember.Controller.extend({
  actions:{
    sayHello(){
      console.log("I'm saying hello this time");
    }
  }
})

and Inside the component app / components / echo-hlabel-tf.js.

actionButtonClicked(){
  console.log('Arrives to the component');
  this.sendAction('fnActionButtonClicked');        
}