JSFiddle - React, Tailwind, and code Playground

by Krzysztof Safjanowski

HTML

<div ng-app="app">
    <div ng-controller="foo">
        <button ng-click="changeOutsideScope()">Call</button>
        <div class="directive" box="outsideScope"></div>
    </div>
</div>

CSS

.directive {
    border: 1px solid #f00;
}

JavaScript

angular.module('app', []).controller('foo', function foo($scope) {
    $scope.changeOutsideScope = function() {
        $scope.outsideScope = 'isolateMethod';
    }
}).directive('box', function() {
    return {
        scope: {
            outsideScope: '=box'
        },
        template: 'directive box <br> isolated method: {{ wasCalled }}',
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch('outsideScope', function(newValue, oldValue) {
                if(newValue !== oldValue) {
                    try {
                        scope[newValue]();
                    } catch(e) {
                        console.error(e);
                    }     
                }
            });
            scope.wasCalled = 'wasnt called';
            scope.isolateMethod = function() {
                scope.wasCalled = 'was called';
            }
        }
    }
});