jquery.maxlength.jsは、anglejsのポピュレートテーブルのテキストエリアには適用されません

Question

私は現在、使用している単一のページアプリケーションにあるさまざまなテキストエリアを管理するためにjquery.maxlength.js（1.0.5）プラグインを使用していますAngularJS（v.1）を使用してデータを入力します。 ng-repeatを使用して作成されたテーブルの中にあるテキストエリアにmaxlength機能を適用する必要があります。テーブルの外側にある他のすべてのテキストエリアでは、maxlengthが適用され、正常に動作しますが、クラスがフィールド上にあってもテーブル内のテキストエリアには適用されません。私は、非同期の角度がテーブルを生成する機会を持っていないうちに、文字通りその時点でクエリが適用されないために、jquery呼び出しが起動すると思われます。私はテーブルの最後の項目がレンダリングされたときにng-initを使って呼び出しを行うことでこれを解決できると考えましたが、何の影響もないようです。 maxlengthをng-repeatのすべてのテキストエリアに適用するにはどうすればよいですか？文書レディ機能の終了時に呼ばれるテーブル内のテキストエリアではないため

JSコール：

$(function(){ 
    /** Other Jquery code here, datepicker and modals, this code works **/ 
    $('textarea.MaxLength4000').maxlength({ maxCharacters: 4000 }); 
}); 

角度JS機能レンダリング表の最後にMAXLENGTHを呼び出す：

$scope.ApplyMaxLength = function (length) { 
    var name = 'textarea.MaxLengthIn' + length; 
    $(name).maxlength({ maxCharacters: length, status: true }); 
}; 

クラスここでの名前は異なっているので、jquery呼び出しが適用されているかどうかはわかります。

HTMLコード：

<div class="row"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <div class="panel-title">Features</div> 
     </div> 
     <div class="panel-body"> 
      <table summary="displays features" id="tblFeatures" class="table table-bordered table-striped table-condensed"> 
        <tbody> 
         <tr> 
          <th>Type</th> 
          <th>Comments</th> 
         </tr> 
         <tr style="width: 100%;" ng-repeat="f in features track by f.Id"> 
          <td><label id="lblFtype">{{ f.Type }}</label></td> 
          <td><textarea id="txtComments{{f.Id}}" ng-model="f.Comments" class="form-control MaxLengthIn4000" style="width: 40em;"></textarea></td> 
         </tr> 
         <tr ng-show="nofeature" ng-init="ApplyMaxLength(4000)"> 
          <td>N/A</td><td>N/A</td><td></td> 
         </tr> 
        </tbody> 
      </table> 
     <div class="form-group"> 
      <label class="col-sm-3 control-label text-right">Other Features:</label> 
      <div class="col-sm-8"> 
       <textarea id="txtSpecialFeature" ng-model="of.otherFeatures" style="width: 40em; height: 4em;" class="form-control MaxLength4000"></textarea> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

は正確に問題を解決し、ありがとうラッパーディレクティブは、あなたの要素

//Define a directive 
angular.module('myModule').directive('myMaxlength', function() { 
    return { 
     link: function (scope, element, attrs) { 
      var maxlength = Number(attrs.myMaxlength); 
      $(element).maxlength({ maxCharacters: maxlength, status: true }); 
     } 
    }; 
}); 

使用

<textarea my-maxlength="4000"></textarea>