Question

考虑以下简单的md-input-container，里面有textarea：

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

当我在控制器中更新obj.prop时，文本被更改（因此我也应该调用$scope.$evalAsync()）。但是，md-char-count仍未更新。为了进行更新，用户将单击文本区域并进行更改。只有这样才会改变。

我认为它是known bug，但是有没有任何改进，或者是否至少有一个解决这个问题的方法？

在这里找到a codepen

ps（如果需要）：角度材料版本1.0.1＆amp;角1.4.5

Answer 1

我也遇到了这个错误，在深入了解mdMaxlength指令之后，我发现我们可以像这样轻松地解决这个问题（根据你的代码）：

    angular.module('app').controller(function($timeout){
     $scope.obj={prop:""};
     //after user input some value reset the form
     $scope.reset=function(){
        $scope.obj.prop=null;

        $scope.formName.$setPristine();
        $scope.formName.$setValidity();
        $scope.formName.$setUntouched();
        $timeout(function(){
           $scope.obj.prop="";
        })
     }

})

Answer 2

我通过override - 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);

这将纠正字符数行为。

md-char-count不在md-input-container中更新

2 个答案: