JSFiddle - React, Tailwind, and code Playground

by ashraf_sabry_m

HTML

<div ng-app="app" ng-controller="appCtrl as c">
{{c.name}} <button ng-click="c.name=null">خارجي
</button>
    <foo-directive name="c.name" />
</div>

CSS

</style>
<script src="//code.angularjs.org/1.7.2/angular.min.js"></script>
<style>

JavaScript

angular
    .module('app', []);

// main.js
function MainCtrl() {
}

angular
    .module('app')
    .controller('MainCtrl', MainCtrl);

// foo.js
function FooDirCtrl() {

}

function fooDirective() {
    return {
        restrict: 'E',
        scope: {
            name: '='
        },
        controller: 'FooDirCtrl',
        controllerAs: 'vm',
        bindToController: true,
        template: `<doo-directive><input ng-model="vm.name"><button ng-click="vm.name=null">FOO</button>
        </doo-directive><deep-directive name="vm.name" />`
    };
}

function deepDirCtrl() {

}

function deepDirective() {
    return {
        restrict: 'E',
        scope: {
            name: '='
        },
        controller: 'DeepDirCtrl',
        controllerAs: 'vm',
        bindToController: true,
        template: `<button ng-click="vm.name='Deeeeeeep'">Deep {{vm.name}}</button>`
    };
}

function dooDirective() {
    return {
        restrict: 'E',
        transclude:true,
        scope: false,
        template: `<div>
        {{ vm.name }}
        <ng-transclude></ng-transclude>
        <button ng-click="vm.name=null">DOO</button>
    </div>`
    };
}

angular
    .module('app')
    .directive('fooDirective', fooDirective)
    .directive('deepDirective', deepDirective)
    .directive('dooDirective', dooDirective)
    .controller('FooDirCtrl', FooDirCtrl)
    .controller('DeepDirCtrl', deepDirCtrl)
    .controller("appCtrl",function($scope)
    {
    $scope.c.name="lolo";
    });