JSFiddle - React, Tailwind, and code Playground

by t4gedieb

HTML

<div ng-app="module" ng-init="showElement = false">
    <button ng-click="showElement = !showElement">Show/Hide</button> <span ng-bind="showElement"></span>

    <div>
        <custom-directive ng-show="showElement"></custom-directive>
    </div>
</div>

JavaScript

angular.module("module", [])
    .directive("customDirective", function () {
    function apicall() {
        alert('run once');
    }
    console.log('custom');

    return {
        template: '<div>CUSTOM DIRECTIVE</div>',
        replace: true,
        restrict : 'EA',
        link: function (scope, element, attr) {
            var unbindWatch = scope.$watch(attr.ngShow, function (value) {
                if (value) {
                    apicall();
                    unbindWatch();
                }
            });
        }
    };
});