angularjs - directive-like component

Question

Here is an example in which I show the difference between implementing an ng-repeat item as directive or as component.

I have an ng-repeat on a list of news.

<div ng-repeat="story in $ctrl.news" class="col-sm-4 col-md-3">
    ...
</div>

Since I care about reusability I thought of creating a directive (or component) that displays a story and added the following within the ng-repeat div element.

<story-thumb story="story"></story-thumb>

score 0 · Accepted Answer · answered Mar 26 '17 at 08:08

Option 1: Implemeting story-thumb as Directive:

app.directive('storyThumb', function(){
  return {
    restrict : 'E',
    scope : {
      story : '='
    },
    templateUrl : 'components/news/story/storythumb.html'
  }
});

In story view we can use something like:

<h3>{{story.title}}</h3>

Option 2: Implementing story-thumb as Component:

app.component('storyThumb', {
  bindings : {
    story : '<'
  },
  templateUrl : 'components/news/story/storythumb.html'
});

In story view we can use something like:

<h3>{{$ctrl.story.title}}</h3>

angularjs - directive-like component

1 Answers1