Lubię tworzyć niestandardowy komponent za pomocą dyrektywy. Sprawdziłem wiele samouczków i wydaje mi się, że ktoś może wyjaśnić, jak działa dyrektywa. komponent, który planuję zrobić, jest

<shout-list></shout-list>

szablon listy okrzyków będzie taki

<div class="shout" ng-repeat="shout in shouts">
    <p>{{shout.message}}</p>
    <img src="media/images/delete.png" width="32" height="32" ng-click="deleteShout({{$index}},'{{shout._id}}')"/>
</div>