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>

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

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

在这里找到a codepen

ps（如果需要）：angular-material 版本 1.0.1 & angular 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

我通过覆盖 - md-maxlength 指令解决了这个问题。试试这个代码笔 - 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);

这将纠正 character-count 行为。

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

md-char-count not updating in md-input-container

javascript

textarea

angularjs

angular-material