JSFiddle - React, Tailwind, and code Playground

by bodine30

HTML

<div ng-controller="MyCtrl">MyCtrl:
    <span>{{myProp | json}}</span>
    <my-directive my-bound-prop="myProp" ng-class="{on:myProp, isolate:myBoundProp}"></my-directive>
    <my-other-directive my-bound-prop="myProp" ng-class="{on:myProp, isolate:myBoundProp}"></my-other-directive>
</div>

CSS

my-directive {
    display:block;
    text-align:center;
    background:red;
    color:white;
}
my-directive.on {
    background:green;
}
/* -- 
ngClass directive's scope is isolated from the 'myDirective' scope, so this never gets applied
-- */
my-directive.isolate {
    background:pink;
}
my-directive::before {
    content:"click to toggle: ";
}

JavaScript

angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
    $scope.myProp = false;
})
.directive('myDirective', function(){
    return {
        scope: {
            myBoundProp: "="
        },
        link: function(scope, iElement, iAttrs) {
            iElement.text(scope.myBoundProp);
            iElement.on('click', function(){
                scope.$apply(function(){
                    scope.myBoundProp = !scope.myBoundProp;
                    iElement.text(scope.myBoundProp);
                });
            });
        }
    }
})
.directive('myOtherDirective', function(){
    return {
        scope: {
            myBoundProp: "="
        },
        link: function(scope, iElement, iAttrs) {
            iElement.text(scope.myBoundProp);
            iElement.on('click', function(){
                scope.$apply(function(){
                    scope.myBoundProp = !scope.myBoundProp;
                    iElement.text(scope.myBoundProp);
                });
            });
        }
    }
});

angular.bootstrap(document, ['myApp']);