JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-app="myApp">
  <div ng-controller="ctrl">
    <li ng-repeat="product in products">
      <product item="product" />
    </li>
  </div>
</div>

JavaScript

'use strict';

var productDirective = function() {
  return {
    restrict: 'E',
    scope: {
      item: '='
    },
    link: function(scope){
    	console.log(scope.item) // <=== item available in directive's scope
    },
    template: '<p> Item: {{item.name}}, Price: {{item.price}}</p>'
  };
};

angular
  .module('myApp', [])
  .controller('ctrl', function($scope){
  	$scope.products = [{
    	name: "Buggatti",
      price: "$560,000"
    }, {
    	name: "Ferrari",
      price: "$260,000"
    }];
  })
  .directive('product', productDirective);