JSFiddle - React, Tailwind, and code Playground

by ashraf_sabry_m

HTML

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

CSS

</style>
<script src="//code.angularjs.org/1.4.3/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>`
    };
}

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

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