Html angularjs-类指令组件

下面是一个示例，其中我展示了将ng repeat item实现为指令或组件之间的区别

我在新闻列表上重复了一次

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

---

选项1：将故事拇指作为指令执行：

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

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

在故事视图中，我们可以使用以下内容：

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

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

{{story.title}

选项2：将故事拇指作为组件实现：

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

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

app.component（'storyThumb'{
绑定：{
故事：'