Question

我有这种代码的和平：

<item ng-repeat="name in names"></item>

在item.html中，有许多内容，例如name.first，name.family等。所以，问题是，由于范围问题，我无法访问name对象。

我很困惑。至少不应该是组件继承name吗？

这是我的组成部分：

app.component('item', {
   templateUrl: '/views/item.html'
});

Answer 1

以下是plnkr示例：

<强>的index.html

  <body ng-controller="MainCtrl">
    <item data="name" ng-repeat="name in names"></item>
  </body>

<强>的script.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.names = [{family: "asdf", first: "test"}, {family: "qwerty", first: "test2"}]
});

angular.module('plunker').component('item', {
   templateUrl: 'item.html',
   bindings: {
     data: '='
   }
});

<强> item.html

{{$ctrl.data.first}}
{{$ctrl.data.family}}
<br>

基本上你要做的就是使用绑定来绑定你用ng-repeat循环的数据，以便在你的组件中访问它。

Answer 2

您必须将name绑定到组件。

来自Angular Docs的示例：

angular.module('heroApp').component('heroDetail', {
  templateUrl: 'heroDetail.html',
  controller: HeroDetailController,
  bindings: {
    hero: '='
  }
});

如何使用ng-repeat组件？

2 个答案: