JSFiddle - React, Tailwind, and code Playground

by PeterShafer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="myapp">
    <counter count="2"></counter>
</div>

JavaScript

angular.module('myapp', []).directive('counter', function($rootScope, $q){
	return {
		template:   "<div class=\"panel panel-default\">"
	              + "<div class=\"panel-heading\">"
                  + "<h3 class=\"panel-title\">"
                  + "The count is: {{ count }}"
                  + "</h3></div>"
	              + "<div class=\"panel-body\">"
                  + "<button ng-click=\"increment()\" class=\"btn btn-default btn-md\">Increment</button>"
                  + "</div></div>",
		restrict: 'E',
		scope: {
			count: '@count'
		},
		controller: function($scope, $element, $attrs){
			$scope.increment = function(){
				$scope.count++;
			}
		},
		link: function(scope, element, attrs){
			scope.count = attrs['count'] || 0;
		},
	};
});