JSFiddle - React, Tailwind, and code Playground

by mrajcok

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<div ng-controller="MemberCtrl">
{{member | json}}
    <div member="member" prefix="{{prefix}}" join-fn="joinNameWithPrefix(someName)"></div>
    <div member="member.children[0]" prefix="{{prefix}}" join-fn="joinNameWithPrefix(someName)"></div>
</div>

JavaScript

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

app.controller('MemberCtrl', function($scope){
	$scope.member = {
		name: "Member1",
		children:[	{ name:"Child1" },
		            { name:"Child2" }
		]
	};
    $scope.prefix = "Mr.";
    $scope.joinNameWithPrefix = function(name) {
        return $scope.prefix + ' ' + name
    }
});

app.directive('member', function(){
    return {
        restrict: 'A',
        template: "{{prefix}}<input type='text' ng-model='member.name'>"
           + "<br>fn result={{ joinFn( {someName: member.name} ) }}",
        scope: {
			member: "=",
            prefix: '@',
            joinFn: '&'
        },
    };
});