Trigger directive on ng-click

Question

I using elastic directive for resizing textarea from this answer. But i using ng-show for textarea, and on click height of textarea is 0. So i need to use $watch somehow to trigger directive on click, but don't know how.

Html:

<textarea ng-show="showOnClick" elastic ng-model="someProperty"></textarea>
<a ng-click="showOnClick = true"> Show text area </a>

Directive:

.directive('elastic', [
    '$timeout',
    function($timeout) {
        return {
            restrict: 'A',
            link: function($scope, element) {
                $scope.initialHeight = $scope.initialHeight || element[0].style.height;
                var resize = function() {
                    element[0].style.height = $scope.initialHeight;
                    element[0].style.height = "" + element[0].scrollHeight + "px";
                };
                element.on("input change", resize);
                $timeout(resize, 0);
            }
        };
    }
]);

Here is JSFIDDLE

Answer 1

as requested, the solution is to $watch the ngShow attr and run some sort of init function when the value is true.

user produced jsfiddle example code:

 .directive('elastic', [
    '$timeout',
    function($timeout) {
        return {
            restrict: 'A',
            scope: {
                ngShow: "="
            },
            link: function($scope, element, attr) {
                $scope.initialHeight = $scope.initialHeight || element[0].style.height;
                var resize = function() {
                    element[0].style.height = $scope.initialHeight;
                    element[0].style.height = "" + element[0].scrollHeight + "px";
                };
                 if (attr.hasOwnProperty("ngShow")) {
                    function ngShow() {
                        if ($scope.ngShow === true) {
                            $timeout(resize, 0);
                        }
                    }
                    $scope.$watch("ngShow", ngShow);
                    setTimeout(ngShow, 0);
                 }
                element.on("input change", resize);
                $timeout(resize, 0);
            }
        };
    }
]);