JSFiddle - React, Tailwind, and code Playground

by janeklb

HTML

<div ng-app="test">
    <div data-directive-a data-checked="true" data-value="#33ff33">
        <div data-directive-b></div>
    </div>
</div>

JavaScript

var app = angular.module('test', []);
app.directive('directiveA', function () {
    return {
        template: '<div>' 
            + 'inside parent directive: {{obj.attr}}'
            + '<input type="checkbox" ng-model="obj.attr" />'
            + '<div ng-transclude></div>'
            + '</div>',
        transclude: true,
        replace: true,
        scope: {
            attr: '@',
            value: '@'
        },
        controller: function ($scope, $element, $attrs) {
            $scope.obj = {
                attr: $attrs.checked == 'true' ? true : false,
                value: $attrs.value
            };
        },
        link: function (scope, element, attrs) {

        }
    };
});
app.directive('directiveB', function () {
    return {
        template: '<div>' 
            + '<span>inside transcluded directive: {{$$prevSibling.obj.attr}}</span>'
            + '<input type="text" ng-model="$$prevSibling.obj.value" />'
            + '</div>',
        replace: true,
        controller: function ($scope, $element, $attrs) {

        },
        link: function (scope, element, attrs) {
            scope.$watch('$$prevSibling.obj.attr', function (newValue) {
                if (!newValue) {
                    scope.$$prevSibling.obj.value = '';
                }
            });
        }
    };
});