Question

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

我在新闻列表中有 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：将故事大拇指实现为组件：

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

在故事视图中，我们可以使用类似的东西：

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

angularjs - 类似指令的组件

1 个答案: