2016-04-04 29 views
0

テキストボックスの文字の数を取得して、elementディレクティブの機能を持つdivタグに表示します。 12/100(12我々は、入力に入力した内容で、100は最大長の値である)問題があるAngularjsカスタムディレクティブの属性の値を取得

、私は知らない。

<input type="text" ng-model="name"> 
    <div counter-directive max-length="100" ng-model="name"></div> 

divタグは、このような何かを表示する必要がありますmax-lengthの値を取得する方法。

here私はあなたのスペルをチェックし、jsfiddle

答えて

3

Firslyに例があります。あなたはあなたの質問でlenghtを数回使用しました。

link関数に渡されたattrsオブジェクトからmax-length属性を取得できます。

link: function (scope, element, attrs) { 
    var foo = attrs.maxLength; 
} 
1

あなたはこれだけしなければならない。

app.directive('counterDirective', function() { 

return { 

    restrict: 'A', 
    require: 'ngModel', 
    scope: { maxLength:'=', ngModel:'&' }, 
    link: function (scope, element, attrs) { 

      console.log(scope.maxLength); 

     scope.$watch(scope.ngModel, function (value) { 

      if (value) { 

       var newValue = value.length; 
       console.log(value); 
       element[0].innerText = newValue; 
      } 
     }); 

    } 
} 

を});

「長さ」で「長さ」を置き換える必要があると思います。

+0

回答ありがとうございます。 ngModelが変更されたときにスコープが$ watchはもはや動かないのですか? –

+0

ngModelを変更するたびに、ディレクティブに新しい値を表示するplunkerがあります。 https://jsfiddle.net/09nw12kc/7/ – Sparw

+1

申し訳ありませんがあなたの質問を理解しませんでした。私はプランカを更新し、今は正しく動作しています:) https://jsfiddle.net/09nw12kc/9/ – Sparw

関連する問題