title: how to execute action methods of a component from a controller or router in ember
body: <p>I need assistance in executing action methods defined in ember components from outside. (even though ember follows DATA Down and Actions Up approach). My usecase is as follows</p>
  
  <pre><code>Application Template
  
      &lt;script type="text/x-handlebars-template" data-template-name="application"&gt;
         &lt;h2&gt; Dialog Component &lt;/h2&gt;
         {{outlet}}
      &lt;/script&gt;
  
  Index Template
      &lt;script type="text/x-handlebars-template" data-template-name="index"&gt;
          &lt;button {{action "showDialog1"}}&gt;Open Dialog 1&lt;/button&gt;
          &lt;button {{action "showDialog2"}}&gt;Open Dialog 2&lt;/button&gt;
          {{#if openFirst}}
             {{#modal-dialog  name="dlg1" title="Modal 1" auto-open="true" onOpen=(action "handleDialogOpen" "dlg1") }} Content of the Dialog ...{{/modal-dialog}}
          {{/if}}
  
          {{#modal-dialog name="dlg2" title="Modal 2" onOpen=(action "handleDialogOpen" "dlg2")}} Content of the dialog ... {{/modal-dialog}}
      &lt;/script&gt;
  
  Modal Dialog Template
      &lt;script type="text/x-handlebars-template" data-template-name="components/modal-dialog"&gt;
          &lt;div class="titlebar-title"&gt;
             &lt;span&gt; {{title}} &lt;/span&gt;
             &lt;a class="closeBtn" {{action "close"}}&gt;X&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
           {{yield}}
          &lt;/div&gt;
      &lt;/script&gt;
  
  Index Controller
  
  App.IndexController = Ember.Controller.extend({
        openFirst : false,
        actions : {
           showDialog1 : function(){
              this.toggleProperty("openFirst");  // open and close the first dialog when clicking the button.
           },
           showDialog2 : function(){
              // want to trigger "open" action of modal-dialog component without using any conditionals(if-else) and without observing "auto-open" attribute
              ......
  
           },
           handleDialogOpen : function(dialogName){
              if(dialogName === "dlg1"){
                 // do something.
              }else if(dialogName === "dlg2"){
                 // do something
              }
           }
        }
  });
  
  Modal Dialog Component
  
  App.ModalDialogComponent = Ember.Component.extend({
          tagName : 'div',
          classNames : ['ui-dialog'],
          attributeNames : ['title','name','auto-open'],
          didInsertElement : function(){
               if(this.get("auto-open")){
                  this.send("open");
               }
          },
          actions : {
                open : function(){
                   $(this.element).show();
                   this.onOpen()
                },
                close : function(){
                    $(this.element).hide();
                }
          }
  });
  
  Css Style Definition
  
  ui-dialog{
    display : none;
  }
  </code></pre>
  
  <p>Is there any way to achieve this ? Kindly guide me.</p>