JSFiddle - React, Tailwind, and code Playground

by boneskull

HTML

<html ng-app="myApp">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body ng-controller="myAppCtrl">
    <postprocess my-variable="myVariable.value" style="padding-top: 10px;"></postprocess>
        <input type="button" ng-click="change()" value="Change Me"/>
    <span>{{myVariable.value}}</span>
</body>
 </html>

JavaScript

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


myApp.directive('postprocess', function()
    {
        return {
            restrict : 'E',
            scope: {
                myVariable: '='
            },
            link: function(scope, element, attrs) {
                scope.$watch('myVariable', function(val) {
                       element.html(val);
                });
                console.log('directive called');
            }  
        };
    });

myApp.controller('myAppCtrl', ['$scope', function ($scope) {
    $scope.myVariable = {
        value : 'Holla'
    };
    
    $scope.change = function() {
        $scope.myVariable.value = 'Changed';
    }
}])