Question

我正在处理有角度的指令，以显示textarea上超过字符数的错误消息。

使用下面的代码，我可以通过追加元素来显示错误（div）MSG，但是在第一次显示它之后我无法隐藏它，我需要在else块中删除“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链接：http://plnkr.co/edit/OjfsfFwkeiJKlnHZ9TOE

Answer 1

首先，您不想在textarea中添加新内容：它不应该包含HTML内容并且无法显示它。而是考虑在元素之后插入错误消息。

对于show / hide功能，我将它提取为两个独立的函数，并从内部事件处理程序中使用它们。

指令看起来像这样：

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

演示： http://plnkr.co/edit/DKrwtBlJ8ikoSKoDWRby?p=preview

Answer 2

考虑使用ng-maxlength - https://docs.angularjs.org/api/ng/directive/input

Answer 3

试试这个，只是一个黑客，添加elCharLimitError = angular.element('<div></div>'); 在你的其他陈述中。

AngularJS指令如何在条件上显示/隐藏自定义（附加）元素

3 个答案: