JSFiddle - React, Tailwind, and code Playground

by merganser

HTML

<div  ng-controller="MyCtrl">

<userinfo id="j1" user="jakob"></userinfo>
<userinfo id="j2" user="john"></userinfo>


</div>

JavaScript

var myapp = angular.module('myApp', []);

myapp.directive('userinfo', function() {
    var directive = {};

    directive.restrict = 'E';

    directive.template = "<div id='{{id}}'  ng-click='changeText()'>User : <b>{{user.firstName}}</b> <b>{{user.lastName}}</b></div>";

    directive.scope = {    
        id : "=id",
        user : "=user"
    }
       directive.link: function (scope, elem, attrs) {
            scope.changeText = function (txt) {
                console.log('test');
            };

    return directive;
});

myapp.controller("MyCtrl", function($scope, $http) {
    $scope.jakob = {};
    $scope.jakob.firstName = "Jakob";
    $scope.jakob.lastName  = "Jenkov";

    $scope.john = {};
    $scope.john.firstName = "John";
    $scope.john.lastName  = "Doe";
});