title: How do I inherit behaviour of another directive in AngularJS?
body: <p>This is really a rather generic question, but as people on IRC appeared to have issues understanding what I was trying to do, I've provided some rather specific information in this post. The answer would likely be applicable to a far wider range of issues than just this specific one.</p>
  
  <p>I'm looking to have one directive inherit behaviour of another directive, while also providing behaviour of its own. Below is an example case.</p>
  
  <p>Say I have the following document:</p>
  
  <pre><code>&lt;body ng-app="AppCore" dock-container&gt;
      &lt;pane dock="left" class="one"&gt;
          left
      &lt;/pane&gt;
      &lt;pane dock="fill" class="two" title="middle"&gt;
          &lt;pane dock="top" class="four" height="100"&gt;
              middle top
          &lt;/pane&gt;
          &lt;pane dock="fill" class="five"&gt;
              middle fill
          &lt;/pane&gt;
      &lt;/pane&gt;
      &lt;pane dock="right" class="three" title="whatever"&gt;
          right
      &lt;/pane&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here, I have three different directives:</p>
  
  <ul>
  <li><strong><code>pane</code></strong>: An element directive. This represents a UI element (a pane or 'panel', as the name implies).</li>
  <li><strong><code>dock-container</code></strong>: An attribute directive. This acts as a modifier; it adds some bookkeeping data to the scope, and marks it as being a 'container'.</li>
  <li><strong><code>dock</code></strong>: An attribute directive. This also acts as a modifier; it indicates that the element should be positioned relative to the nearest <code>dock-container</code> parent - 'docking' here refers to making the element 'stick' to a side of the nearest container (or fill up the remaining space).</li>
  </ul>
  
  <p>Now, the problem is that a <code>pane</code> should also implicitly be a <code>dock-container</code> - that is, it should behave exactly the same as an element with the <code>dock-container</code> directive would, in addition to <code>pane</code>-specific behaviour.</p>
  
  <p>However, in the interest of clean markup, I don't want to have to explicitly specify <code>dock-container</code> on every <code>pane</code> - it should implicitly inherit from <code>dock-container</code> without having to actually specify the <code>dock-container</code> directive.</p>
  
  <p>In other words, I'm looking to make my <code>pane</code> directive behave as if it were like this:</p>
  
  <pre><code>&lt;pane dock-container&gt;
  </code></pre>
  
  <p>... while it <strong>actually</strong> says this in the document:</p>
  
  <pre><code>&lt;pane&gt;
  </code></pre>
  
  <p>I don't particularly care <em>how</em> the <code>pane</code> directive inherits its behaviour from the <code>dock-container</code> directive, even if it means having the <code>pane</code> directive add the <code>dock-container</code> directive itself before Angular finishes processing the element. Ideally, the <code>link</code> function of the <code>dock-container</code> directive, not just the controller, would <em>also</em> be applied to the <code>pane</code>.</p>
  
  <p>I am currently using <code>element.parent().controller('dockContainer')</code> to find the nearest <code>dock-container</code> from a <code>dock</code> directive - for this to work, the controller that I've defined for the <code>dock-controller</code> directive would have to be present on the <code>pane</code> element, regardless of the method of inheritance.</p>
  
  <p>If your suggested inheritance implementation requires a different method of finding the nearest <code>dock-container</code> (or <code>pane</code>), that's fine too - the problem here is just the inheritance, the rest can be changed to accommodate the solution to this problem.</p>
  
  <p>The following are <strong>not</strong> suitable options:</p>
  
  <ul>
  <li>Copy-pasting the code for <code>dock-container</code> to the <code>pane</code> directive. I want to keep code duplication to a minimum, and it's quite possible that other directives in the future should also inherit from <code>dock-container</code>.</li>
  <li>Manually adding <code>dock-container</code> to every <code>pane</code> element - this is exactly what I'm trying to avoid. The code I'm working on is meant to be used as a reusable set of directives, and I aim to keep the syntax as clean as possible. <em>Every</em> <code>pane</code> should inherit the <code>dock-container</code> behaviour, so there's no added value in requiring it to be specified explicitly.</li>
  <li>Anything that overrides the behaviour for the <code>pane</code> directive. The <code>dock-container</code> behaviour should be an <em>addition</em>, not a replacement. The <code>pane</code> directive will also have some specific behaviour of its own, that the <code>dock-container</code> directive itself does not have.</li>
  <li>Anything that makes it impossible for an element to have both a <code>dock</code> and <code>dock-container</code> directive - the search for the 'nearest <code>dock-container</code>' starts at the parent of the element, so an element will never be its <em>own</em> <code>dock-container</code>.</li>
  <li>Anything that changes the type of element. The <code>pane</code> element should stay a <code>pane</code> element.</li>
  </ul>