AngularJS Directive how to show/hide custom(appended) element on a condition

Question

I' working on angular directive, to show error msg on exceeding character count on textarea.

with following code, I can show error(div) MSG by appending on element, but I cannot hide it after showing it for first time, what I need to do in else block to remove the "elCharLimitError".

angular.module('app', []).directive('wordCount', ['$compile', function($compile) {


    function wordCountLinkFunc(scope, ele, attr, ngModel) {

        var charLimit = attr.wordCount;
        console.log(charLimit);
        var elCharLimitError = angular.element('<div class="alert alert-danger">Cannot exceed Character limit<b>' + charLimit + '</b></div>');

        ele.bind('keyup', function(event) {

            if (ngModel.$viewValue && ngModel.$viewValue.length >= charLimit) {
                $compile(elCharLimitError)(scope);
                ele.append(elCharLimitError);
            } else {
                //TODO: need help to hide the error element "elCharLimitError"
            }
        });
        ele.bind('keypress', function(event) {

            if (ngModel.$viewValue && ngModel.$viewValue.length >= charLimit) {
                if (event.keyCode !== 8) {
                    event.preventDefault();
                }
            } else {
                //TODO: need help to hide the error msg "elCharLimitError"
            }
        });
    }

    return {
        restrict: 'A',
        require: 'ngModel',
        link: wordCountLinkFunc
    };
}]);

plunker Link : http://plnkr.co/edit/OjfsfFwkeiJKlnHZ9TOE

a small comment - it is a bad practice to bind on the element as you do .. this is more jquery like than angularjs - use ng-keypress , ng-keyup instead and have those functions on your controller - have a look here http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — Michail Michailidis, Jun 18 '15 at 20:42
imagine if I have 100 textarea in my application, I cannot write character count for each teatarea, the purpose of this directive is to use in my application — BeingDev, Jun 18 '15 at 20:44
You will need to check your conditions and then put that on your controller with this or your scope.. Then in html you can do ng-if /ng-show/ng-hide for the behavior you want — Michail Michailidis, Jun 18 '15 at 20:44
The way I describe it will work with however many textareas.. and your code will be angularjs-way — Michail Michailidis, Jun 18 '15 at 20:45

score 1 · Accepted Answer · answered Jun 18 '15 at 21:10

First of all, you don't want to append new content in textarea: it's not supposed to have HTML content in it and can't display it. Instead consider inserting error message right after the element.

For show/hide functionality I would extract it into two separate functions and use them from inside event handler.

Directive will look something like this:

angular.module('app', []).directive('wordCount', ['$compile', function($compile) {


    function wordCountLinkFunc(scope, ele, attr, ngModel) {

        var charLimit = attr.wordCount;
        var elCharLimitError = angular.element('<div class="alert alert-danger">Cannot exceed Character limit<b>' + charLimit + '</b></div>');

        function showError() {
            if (!elCharLimitError.hasClass('ng-scope')) {
                $compile(elCharLimitError)(scope);
                ele.after(elCharLimitError);
            }
            elCharLimitError.show();
        }

        function hideError() {
            elCharLimitError.hide();
        }

        ele.bind('keyup', function(event) {
            if (ngModel.$viewValue && ngModel.$viewValue.length >= charLimit) {
                showError();
            } else {
                hideError();
            }
        });

        ele.bind('keypress', function(event) {

            if (ngModel.$viewValue && ngModel.$viewValue.length >= charLimit) {
                if (event.keyCode !== 8) {
                    event.preventDefault();
                }
            } else {
                hideError();
            }
        });
    }

    return {
        restrict: 'A',
        require: 'ngModel',
        link: wordCountLinkFunc
    };
}]);

Demo: http://plnkr.co/edit/DKrwtBlJ8ikoSKoDWRby?p=preview

can we stop copy paste ? when I copy text and paste it allows me to exceed charater or word limit — BeingDev, Jun 19 '15 at 17:03

score 0 · Answer 2 · answered Jun 18 '15 at 21:40

0

Consider using ng-maxlength - https://docs.angularjs.org/api/ng/directive/input

answered Jun 18 '15 at 21:40

ronnyb

78
1
7

Thanks... But how do u stop user from typing when he reaches character limit.. Again reminding u i use textarea in 100 different views... Looking for directive solution to manage character count – BeingDev Jun 18 '15 at 22:13
ah makes sense. maybe consider this? http://stackoverflow.com/questions/10414420/how-to-prevent-user-to-enter-text-in-textarea-after-reaching-max-character-limit – ronnyb Jun 19 '15 at 19:01

score 0 · Answer 3 · answered Jun 18 '15 at 22:20

0

Try this, just a hack, add elCharLimitError = angular.element('<div></div>'); in your else statements.

answered Jun 18 '15 at 22:20

Sudhansu Choudhary

3,322
3
19
30

AngularJS Directive how to show/hide custom(appended) element on a condition

3 Answers3