JSFiddle - React, Tailwind, and code Playground

by scarletsky

HTML

<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <p>{{ name }}</p>
    </div>
    
    <div my-directive1>
        <p>{{ name }}</p>
    </div>
    
    <div my-directive2>
        <p>{{ directiveCtrl2.name }}</p>
    </div>
</div>

JavaScript

angular.module('myApp', [])
.controller('mainCtrl', function ($scope) {
    $scope.name = 'I am in main ctrl';
})

.directive('myDirective1', function () {
    return {
        scope: true,
        controller: function ($scope) {
            $scope.name = 'I am in directive1';
        }
    }
})

.directive('myDirective2', function () {
    return {
        scope: true,
        controller: function () {
            this.name = 'I am in directive2';
        },
        controllerAs: 'directiveCtrl2'
    }
});