JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!doctype html>
<html>
    <head></head>
<body ng-controller="foo">
    <textarea my-maxlength="20" ng-model="bar"></textarea>
    <h1>{{bar}}</h1>
    <button ng-click="test()">TEST</button>
</body>
</html>

JavaScript

var myApp = angular.module('myApp', []);
angular.element(document).ready(function() {
    angular.bootstrap(document, ['myApp']);
});

function foo($scope) {
    $scope.test = function() {
        console.log($scope.bar);
    }
}

myApp.directive('myMaxlength', ['$compile', function($compile) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, controller) {
            var count = controller.$viewValue().length;
            element.after('<span>Characters remaining: </span>');
            var display = $('<span class="chars-remaining"></span>').appendTo(element);
            controller.$parsers.unshift(function(value) {
                count = value.length;
                return value;
            });
    display.
        }
    }}]);