JSFiddle - React, Tailwind, and code Playground

by amatiasq

HTML

<div id="foo">
    <div ng-controller="myctrl">
        <test attr1="true" attr2="false" attr3="value"></test>
    </div>
</div>

JavaScript

angular.module('foo', [])
.controller('myctrl', function($scope, $timeout) {
    $scope.value = true;
    action();
  
    function action() {
        $scope.value = !$scope.value;
        $timeout(action, 500);
    }
})
.directive('test', function() {
    return {
        restrict: 'E',
        scope: { attr1: '=', attr2: '=', attr3: '=' },
        link: function(scope) {
            scope.$watch('attr1 + "" + attr2 + "" + attr3', function() {
                console.log(scope.attr1, scope.attr2, scope.attr3);
            });
        }
    };
});

angular.bootstrap(document.querySelector('#foo'), [ 'foo' ]);