Question

这是我在当时为快速解决方案编写的一段非常糟糕的代码。基本上我想扩展<textarea>，其中包含＆＃34; N个字符＆＃34;啄。所以我认为这对于一个整洁的小指令来说会很棒。

<limitedtext model="study.msg" 
             maxlen="400" 
             placeholder="enter email message">
</limitedtext>

这是模板（以及变得丑陋的事情）： https://github.com/martinchristov/crg.studyalerts/blob/master/app/partials/limitedtext.html

正如您所注意到的，我使用<textarea ng-model="$parent.study.msg">我知道这很糟糕，但这就是我在这里发帖的全部原因。

我的问题是，如何将模型传递给指令，然后可以在指令中更新，并且可以从指令的父级访问这些更新？在上面的例子中，我希望该指令更新study.msg

Answer 1

@ link64建议的解决方案如下：

<limitedtext ng-model="study.msg" maxlen="400" placeholder="enter email message" ng-show="study.via==0"></limitedtext>

指令部分：

<div class="limitedtext">
<textarea maxlength="{{maxlen}}" placeholder="{{placeholder}}"></textarea>
<div class="counter" ng-hide="maxlength==0" ng-class="{red:charsleft<0}">{{charsleft}} chars left</div>
</div>

指令JS：

directive('limitedtext', [function () {
return {
    restrict: 'E',
    replace:true,
    transclude:true,
    require:'?ngModel',
    templateUrl:'partials/limitedtext.html',
    scope:{
        maxlen:'@',
        placeholder:'@'
    },
    link: function ($scope, el, attrs, ngModel) {
        var textarea = el.find('textarea');
        ngModel.$render = function(){
            textarea.val(ngModel.$viewValue);
            $scope.charsleft = $scope.maxlen - ngModel.$viewValue.length;
        };
        textarea.on('blur keyup change', function(){
            $scope.$apply(read);
        });
        function read () {
            ngModel.$setViewValue(textarea.val());
            $scope.charsleft = $scope.maxlen - ngModel.$viewValue.length;
        }
    }
};
}]);

谢谢！

我怎样才能解除这个指令呢？

1 个答案: