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

not sure I understood what you're trying to accomplish but it seems like you are looking to run resize on either focus keyup or keydown right? — Jony-Y, Aug 23 '15 at 07:21
@Jony-Y This directive resize textarea depends on content. But if textarea s hided on load and then shown on click the height is 0, so it invisible. I try to run `resize` on click. — Shulte, Aug 23 '15 at 07:24
this is a textarea, so click would be focus ... or mousedown — Jony-Y, Aug 23 '15 at 07:25
trigger directive on click outside textarea ` Show text area ` — Shulte, Aug 23 '15 at 07:28
ok I got what you want... just create a quick plunker and Ill help... basically what you want to do is either run an init function on the directive setting a default size... or nicer just add the attr parameter to the directive and observe the ng-show attr and on change run the resize or instead of ngShow just pass the showOnClick to the directive and $watch it and run resize accordingly — Jony-Y, Aug 23 '15 at 07:49
@Jony-Y Here is solution with observe ngShow http://jsfiddle.net/zjcbomxd/2/. You can post as an answer and i'll accept — Shulte, Aug 23 '15 at 08:49

score 1 · Accepted Answer · answered Aug 23 '15 at 09:10

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);
            }
        };
    }
]);

Trigger directive on ng-click

1 Answers1