javascript - AngularJS指令如何在条件下显示/隐藏自定义(附加)元素

Question

我正在研究 Angular 指令，以在文本区域上超出字符数显示错误消息。

使用以下代码，我可以通过附加在元素上来显示错误(div)MSG，但在第一次显示后我无法隐藏它，我需要在 else block 中做什么来删除“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
    };
}]);

笨蛋链接:http://plnkr.co/edit/OjfsfFwkeiJKlnHZ9TOE

Answer 1

首先，您不想在textarea中追加新内容:它不应该包含HTML内容并且无法显示它。相反，请考虑在元素后面插入错误消息。

对于显示/隐藏功能，我会将其提取为两个单独的函数，并从事件处理程序内部使用它们。

指令看起来像这样:

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