Question

我需要一些Angular Component方法的帮助。我有一个主html与它的主控制器，其中我有一个客户端数据的JSON列表，如：

  clients: [{
    "name": "John Jackson",
    "age": "21",
    "hair": "brown",
  }, {
    "name": "Janet Doe",
    "age": "19",
    "hair": "blond",
  }]

我需要在主html中显示所有客户端数据，所以我想我可以使用Angular组件（以前从未使用过）。我为组件创建了一个html模板（使用bootstrap btw），非常简单：

<div class="row">
          <label>Name: {{client.name}}</label>
          <label>Age: {{client.age}}</label>
          <label>Hair: {{client.hair}}</label>   
</div>

所以现在我需要在main.html中使用ng-repeat，循环客户端。对于列表中的每个客户端，我需要添加组件的行div。这可能吗？因为我需要将客户端信息（EACH客户端，而不是列表）传递给组件，并且必须为每个客户端返回html。

在我发现的示例中，组件使用必要的信息（客户端）进行计数，但在我的情况下，信息在主控制器中，我需要将其传递给控制器（因为它们具有不同的范围）。 / p>

这个想法是在不同视图中调用的组件。

如果有人能给我第一步（或类似情况的一个很好的例子）会很棒。

提前多多感谢！

Answer 1

为什么不能使用与模板（.html）关联的指令，该指令使用ng-repeat并显示客户端列表，可以与任何视图一起使用，使范围隔离，如果必需的。

控制器，指令如下所示，

angular.module('sample', []).controller('mainController', function($scope) {
  $scope.clients =  [{
    "name": "John Jackson",
    "age": "21",
    "hair": "brown",
  }, {
    "name": "Janet Doe",
    "age": "19",
    "hair": "blond",
  }];
});

angular.module('sample', []).directive('myDirective', function() {
  return {
    templateUrl: 'my-template.html'
  };
});

MY-template.html：

<div class="row" ng-repeat="client in clients>
     <label>Name: {{client.name}}</label>
     <label>Age: {{client.age}}</label>
     <label>Hair: {{client.hair}}</label>   
</div>

main.html中：

<div ng-controller="mainController">
  <div my-directive></div>
</div>

Answer 2

你真正需要做的就是在你的div上使用ng-repeat：

myApp.controller('MainController', function() {
    this.clients = [{
        "name": "John Jackson",
        "age": "21",
        "hair": "brown",
      }, {
        "name": "Janet Doe",
        "age": "19",
        "hair": "blond",
      }];
}

然后在你的HTML

中

<div ng-controller="MainController as main">
    <div class="row" ng-repeat="client in main.clients">
          <label>Name: {{client.name}}</label>
          <label>Age: {{client.age}}</label>
          <label>Hair: {{client.hair}}</label>   
    </div>
</div>

Angular 1.5 - 用数据检索html的组件

2 个答案: