javascript - md-char-count 未在 md-input-container 中更新

Question

考虑以下简单的 md-input-container，其中包含文本区域:

<md-input-container class="md-block">
    <textarea aria-label="tt" ng-model="obj.prop" md-maxlength="250" rows="5"></textarea>
</md-input-container>

当我更新 Controller 中的 obj.prop 时，文本会发生更改(因此我也应该调用 $scope.$evalAsync())。但是，md-char-count 仍未更新。为了更新它，用户将单击文本区域并更改它。只有这样它才会被改变。

我认为它是known bug但是否有任何改进或者是否有(至少)解决此问题的方法？

在这里你可以找到a codepen

ps(如果需要): Angular Material 版本 1.0.1 和 Angular 1.4.5

Answer 1

我通过覆盖 - md-maxlength 指令解决了这个问题。试试这个codepen - http://codepen.io/himvins/pen/JEgyOK?editors=1010

覆盖 md-maxlength 的函数:

function override_mdMaxlength($provide) {
    $provide.decorator(
        'mdMaxlengthDirective',
        function($delegate) {
            var mdMaxlength = $delegate[0];
            var link = mdMaxlength.link;
            mdMaxlength.compile = function() {
                //Line 18 to 64: Code of md-maxlength directive. Change in line 62
                return function(scope, element, attr, ctrls) {
                    var maxlength;
                    var ngModelCtrl = ctrls[0];
                    var containerCtrl = ctrls[1];
                    var charCountEl = angular.element('<div class="md-char-counter">');

                    attr.$set('ngTrim', 'false');
                    containerCtrl.element.append(charCountEl);

                    ngModelCtrl.$formatters.push(renderCharCount);
                    ngModelCtrl.$viewChangeListeners.push(renderCharCount);
                    element.on(
                        'input keydown', 
                        function() {
                            renderCharCount(); //make sure it's called with no args
                        }
                    );

                    scope.$watch(attr.mdMaxlength, function(value) {
                        maxlength = value;
                        if (angular.isNumber(value) && value > 0) {
                            if (!charCountEl.parent().length) {
                                $animate.enter(
                                    charCountEl, 
                                    containerCtrl.element,
                                    angular.element(containerCtrl.element[0].lastElementChild)
                                );
                            }
                            renderCharCount();
                        } else {
                            $animate.leave(charCountEl);
                        }
                    });

                    ngModelCtrl.$validators['md-maxlength'] = function(modelValue, viewValue) {
                        if (!angular.isNumber(maxlength) || maxlength < 0) {
                            return true;
                        }
                        return (modelValue || element.val() || viewValue || '').length <= maxlength;
                    };

                    function renderCharCount(value) {
                        //Original code commented
                        debugger;
                        if(ngModelCtrl.$modelValue !== "")
                                charCountEl.text( ( element.val() || value || '' ).length + '/' + maxlength );        
                        else
                                 charCountEl.text((ngModelCtrl.$modelValue || '').length + '/' + maxlength);
                        return value;
                    }
                };
            };
            return $delegate;
        }
    );
}

将此函数添加到模块的配置中，如下所示:

    yourModule.config(override_mdMaxlength);

这将纠正字符计数行为。