title: how to write a directive in angularjs
body: <p>i like to make a custom component using directive. i checked lot of tutorials and its get confusing me can anyone explain how a directive works. the component i am planing to make is</p>
  
  <pre><code>&lt;shout-list&gt;&lt;/shout-list&gt;
  </code></pre>
  
  <p>the template for shout list will be like this</p>
  
  <pre><code>&lt;div class="shout" ng-repeat="shout in shouts"&gt;
      &lt;p&gt;{{shout.message}}&lt;/p&gt;
      &lt;img src="media/images/delete.png" width="32" height="32" ng-click="deleteShout({{$index}},'{{shout._id}}')"/&gt;
  &lt;/div&gt; 
  </code></pre>