JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<div ng-app="demoApp" ng-controller="MainController as ctrl">
    model value in ctrl. {{ctrl.data}}
    <my-directive data="ctrl.data"></my-directive>
</div>

JavaScript

angular.module('demoApp', [])
	.controller('MainController', MainController)
	.directive('myDirective', myDirective);

function MainController($interval) {
	var self = this,
        refreshTime = 1000; //interval time in ms
    
    activate();
    
    function activate() {
    	this.data = 0;
    	$interval(updateView, refreshTime);
    }
    
    function updateView() {
    	self.data = Math.round(Math.random()*100, 0);
    }
}

function myDirective() {
	return {
    	restrict: 'E',
        scope: {
        },
        bindToController: {
            data: '='
        },
        template: '<div><p>directive data: {{directiveCtrl.data}}</p></div>',
        controller: function($scope) {
            $scope.$watch('directiveCtrl.data', function(newValue) {
            	console.log('data changed', newValue);
            });
        },
        controllerAs: 'directiveCtrl'
    }
}