JSFiddle - React, Tailwind, and code Playground

by Rob Rothe

HTML

<div ng-app="myApp" ng-controller="AppCtrl as ctrl">
  <div ng-repeat="user in ctrl.users">
    <button alert-user="user">
      {{ user.first }}
    </button>
  </div>

  <hr>

  <user-element ng-repeat="user in ctrl.users" user="user"></user-element>

  <hr>

  <div ng-repeat="user in ctrl.users" user-attribute="user"></div>


</div>

CSS

body {
  font-family: Helvetica;
}

.red {
  color: red;
}

h1,
h2,
h3,
h4 {
  font-weight:normal;
  margin:0;
}

user-element {
  display:block;
  margin-bottom:20px;
}

JavaScript

angular
  .module('myApp', [])
  .controller('AppCtrl', AppCtrl)
  .directive('userElement', userElement)
  .directive('userAttribute', userAttribute)
  .directive('alertUser', alertUser);

function AppCtrl() {
  var vm = this;

  vm.users = [{
    first: 'Jimmy',
    last: 'Page',
    role: 'Guitar'
  }, {
    first: 'Robert',
    last: 'Plant',
    role: 'Vocals'
  }, {
    first: 'John',
    last: 'Paul Jones',
    role: 'Bass, Keyboards'
  }, {
    first: 'John',
    last: 'Bonham',
    role: 'Drums'
  }];
}


function userElement() {
  var directive = {
    restrict: 'E',
    template: '<h1>{{ user.first }} {{ user.last }}</h1><h2>{{ user.role }}</h2>',
    scope: {
      user: '=user'
    }
  };
  return directive;
}


function userAttribute() {
  var directive = {
    restrict: 'A',
    template: '<h3 class="red">{{ user.first }} {{ user.last }}</h3><h4>{{ user.role }}</h4>',
    scope: {
      user: '=userAttribute'
    }
  };
  return directive;
}

function alertUser() {
  var directive = {
    restrict: 'A',
    scope: {
      user: '=alertUser'
    },
    link: link
  };
  return directive;

  function link(scope, element, attr) {
    element.on('click', function() {
      alert(scope.user.first);
    });
  }
}