Angular 1.5 - Component to retrieve html with data

Question

I'm needing some help with Angular Component method. I have a main html with its main controller, in which i have a JSON list of client data like:

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

I need to display all the client data in the main html so i thought i could use an Angular component (never used before). I created a html template for the component (using bootstrap btw), quite simple like:

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

So now i need to use a ng-repeat in the main.html, looping the clients. For each client in the list i need to add the row div of the component. Is this possible? As i need to pass the client info (EACH client, not the list) to the component, and this one has to return the html for each client.

In the examples i found, the component counts with the necessary information (client), but in my case that information is in the main controller, and i need to pass it to the controller (as they have different scopes).

The idea is the component to be called in different views.

If anybody could give me that first step (or a nice example of a similar situation) would be awesome.

Thanks a lot in advance!

score 0 · Answer 1 · answered Nov 17 '16 at 20:13

Why can't you use a directive, that's associated with template(.html) which uses ng-repeat and display the list of clients, which can be used with any view making the scope isolate if required.

The controller, directive looks like below,

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>

Thanks for your reply! I'm quite new at Angular, and i thought components where better at this "small" needs, and directives were used to bigger ones. I could be wrong — TRDrake, Nov 18 '16 at 12:04

score 0 · Answer 2 · answered Dec 13 '16 at 17:25

All you really need to do is use ng-repeat on your div:

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

Then in your 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 - Component to retrieve html with data

2 Answers2