JSFiddle - React, Tailwind, and code Playground

by cmacrander

HTML

<div ng-app="MyApp">
    <div my-widget widget-id="5"></div>
</div>
<br><br>
<div id="output1"></div>
<div id="output2"></div>

JavaScript

var MyApp = angular.module('MyApp', [], function () {});

MyApp.directive('myWidget', function () {
    return {
        scope: {id: '@widgetId'},
        controller: function ($scope, $timeout) {
            document.getElementById('output1').innerHTML = "During controller execution, id is: " + $scope.id;
            $timeout(function () {
                document.getElementById('output2').innerHTML = "After a timeout, id is: " + $scope.id;
            }, 100);
        },
        template: '<div>This is a widget with id {{ id }}.</div>'
    }
});