title: Angularjs: Element based directive communication
body: <p>I have the need to have two Element Based directives. </p>
  
  <p>The both have their own UI hence why I used restrict: "E"</p>
  
  <p>I need a way to pass data from one/or more directives to another </p>
  
  <p>The two directives sending data are in two different controllers (one in the page head, and one in the page body) therefore attempting to use </p>
  
  <pre><code>scope: {
      onNotify : "&amp;"
  }
  </code></pre>
  
  <p>just becomes messy since the scopes are different.</p>
  
  <p>The best I could come up with is a "message bus" pattern. Where I have introduced a 3rd (attributed based) directive that exposes an "api"</p>
  
  <pre><code>api = {
    addListener : function(event, fn),
    publish : function(event, data)
  }
  </code></pre>
  
  <p>jsfiddle here: <a href="http://jsfiddle.net/concept/dELCv/" rel="nofollow">http://jsfiddle.net/concept/dELCv/</a></p>
  
  <p>My questions are these:</p>
  
  <ol>
  <li>Is this in-fact the only way to get two element-based directives to communicate?</li>
  <li>The scope feels wrong, since i have had to use $(document).data("fc-bus.api", api) to share the api instance between controllers. Can someone please suggest a better way of sharing the API between the controllers</li>
  </ol>
  
  <p>It works and I guess it is fine, however it really doesn't feel very "angular" with the global scoped api</p>
  
  <p>I look forward to all your answers and comments</p>