JSFiddle - React, Tailwind, and code Playground

by mrajcok

HTML

<div ng-app="test">
    <div ng-controller="NoTouchPrevSibling">
	   <div data-directive-a data-value="model.value" data-checked="model.checkedState">
          <div data-directive-b></div>
       </div>
   </div>
</div>

JavaScript

var app = angular.module('test', []);
app.controller("NoTouchPrevSibling", function ($scope) {
   $scope.model = {value: '#33ff33', checkedState: true};
});
app.directive('directiveA', function () {
    return {
        template: '<div>' 
            + 'inside parent directive: {{checkedState}}'
            + '<input type="checkbox" ng-model="checkedState" />'
            + '<div ng-transclude></div>'
            + '</div>',
        transclude: true,
        replace: true,
        scope: {
        	  value: '=',
        	  checkedState: '=checked'
        	},
    };
});
app.directive('directiveB', function () {
    return {
        template: '<div>' 
            + '<span>inside transcluded directive: {{model.checkedState}}</span>'
            + '<input type="text" ng-model="model.value" />'
            + '</div>',
        replace: true,
        scope: true
    };
});