JSFiddle - React, Tailwind, and code Playground

by mmarkey

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-controller="ctrl">{{value}}</div>
<div tutorial></div>

JavaScript

angular.module('ngApp', [])

.service('service', function ($timeout, $rootScope) {
    
    var t = this;
    this.data={
        somedata:0
    };
    
    setInterval(function() {               
        t.data.somedata = t.data.somedata + 1;                     
        $rootScope.$broadcast('valueChanged', t.data.somedata);
    }, 1000);
    
    this.setText = function(cb) {
        

    };
    
})
 
.controller('ctrl', function ($scope, service) {
    $scope.service = service;
    $scope.$on('valueChanged', function (evt, counter) {       
        $scope.$apply(function() {
            $scope.value = counter;
        });
    });
    
})

.directive('tutorial', function($scope) {
    return {
        template: "tutorial! + {{data}}"
        link: function(scope, element, attrs){
        
            scope.$watch('loadtext', function(newValue, oldValue){
                if (newValue !== oldValue){
                alert("watch working");
                element.addClass("red");
                element.html(newValue.ok);
                }
            });
            
            
            testService.setText(function(data) {
                scope.loadtext = data;
            });


        }
    };
})
;