angularjs - 类似指令的组件

【问题标题】：angularjs - directive-like componentangularjs - 类似指令的组件
【发布时间】：2017-08-18 23:37:51
【问题描述】：

这是一个示例，我展示了将 ng-repeat 项 实现为指令或组件之间的区别。

我在新闻列表中有一个 ng-repeat。

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

由于我关心可重用性，我想创建一个显示故事的指令（或组件），并在ng-repeat div 元素中添加以下内容。

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

【问题讨论】：

标签： html angularjs angularjs-directive angularjs-components

【解决方案1】：

选项 1：将 story-thumb 实现为指令：

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

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

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

选项 2：将 story-thumb 实现为组件：

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

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

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

【讨论】：