SO question

Directive with text binding from devices controller

by eitanp461

HTML

<div ng-app="demo">
  <div ng-controller="DevicesController as ctrl">
    <div class="pm-table-header flexheader">
      <span class="pm-device-index"></span>
      <span class="pm-device-name">Device Name</span>
      <span class="pm-device-image"></span>
    </div>
    <div ng-repeat="device in ctrl.devices">
      <foo index="{{$index+1}}" name="{{device.name}}" image="{{device.image}}"></foo>
    </div>
  </div>
</div>

CSS

.flexrow, .flexheader {
  display: flex;
  align-items: center;
}

.odd {
  background-color: #8ef8ef;
}

.even {
  background-color: white;
}

.pm-table-header {
  background-color: #cccccc;  
}

.pm-device-index {
  width: 35px;
}

.pm-table-row .pm-device-name {
  width: 120px;
  height: 120px;
  line-height: 120px;
}

JavaScript

// Source
angular.module('demo', [])
  .directive('foo', function() {
    return {
      scope: {
        name: '@',
        image: '@',
        index: '@'
      },
      template: `<div class="flexrow pm-table-row" ng-class="{even: !(index%2), odd: (index%2)}">
      <span class="pm-device-index">{{index}}</span>
       <span class="pm-device-name">Device {{name}}</span>
       <span class="pm-device-image">with image {{image}}</span></div>`
    }
  })
  .controller('DevicesController', function() {
    this.devices = [{
      name: 'aa',
      image: 'image-aa'
    }, {
      name: 'bb',
      image: 'image-bb'
    }, {
      name: 'cc',
      image: 'image-cc'
    }, {
      name: 'dd',
      image: 'image-dd'
    }];
  });