angularjs

Question

这是一个示例，其中我展示了将 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>

Answer 1

选项 1：将故事拇指作为指令实施：

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>

angularjs - 类似指令的组件

angularjs - directive-like component

html

angularjs-directive

angularjs-components