JSFiddle - React, Tailwind, and code Playground

by gogirl

HTML

<div ng-app='app'>
    <div ng-controller="Ctrl">
        <div ng-init="data.fromInit = 'init.data'">
        <input ng-model="data.fromController" />
        <my-D my-attr="{{data.fromInit}}">
             <h3>Dom: Transclude fromDirective: <span style="color:red">{{fromDirective}}</span></h3>
             <h3>Dom: Transclude data.fromController: <span style="color:red">{{data.fromController}}</span></h3>
        </my-D>
    </div>
</div>

JavaScript

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

    app.controller('Ctrl', function ($scope) {
        $scope.data = {};
    });

    app.directive('myD', function () {
        return {
            restrict: 'E',
            scope: {
                fromDirective: '@myAttr'
            },
            transclude: true,
            link: function (scope) {},
           template: '<div ng-transclude>' +
                '<h3>Template fromDirective: <span style="color:red">{{fromDirective}}</span></h3>' +
                '<h3>Template data.fromController: <span style="color:red">{{data.fromController}}</span></h3>' +
                '</div>'
        }
    });