title: Inheriting AngularJS directives to create reusable components
body: <p>I have been working on AngularJS for a while and have researched quite a lot. I am working on building reusable custom components/widgets using AngularJS directives. I have been quite successful at it. However, I want to adhere to inheritance while doing the same.
  Let me explain with an example.</p>
  
  <p>I have created a directive <code>myButton</code> that creates a button with all the styles &amp; functionality. Now I would like to extend/inherit this <code>myButton</code> to create a <code>myToggleButton</code> with some added features &amp; functionality. I do not wish to rewrite <code>myButton</code> features again.</p>
  
  <p>I have explored various options.</p>
  
  <ol>
  <li><p>As suggested in <a href="https://gist.github.com/BrainCrumbz/5832057" rel="noreferrer">https://gist.github.com/BrainCrumbz/5832057</a>, I created a factory/service and injected it into the directive. But this is not allowing me to take full benefit of the inheritance. I am still having to rewrite most of the properties.</p></li>
  <li><p>I tried using plain object-oriented JavaScript for inheritance but in that case I would not be using AngulrJS directives. I want to follow Angular concepts strictly. </p></li>
  </ol>
  
  <p>So any suggestions would be most welcome. </p>