1

基本的に、テンプレートに入力するための2つの入力フィールドを持つ文字カウンターを作成しています。問題は、フィールドの1つがオプションであり、選択された場合に文字数に追加される定型文があることです。したがって、私の最大の問題は、両方の入力領域の文字列の長さを取得することです。モデルが変更されると、renderメソッドが実行されません。それがなぜなのか、私はかなり混乱しています。

var $scope;
var app = angular.module('miniapp', []);

function Ctrl($scope) {
    $scope.form = {}
}

app.directive('charcount', function(){
    return {
        restrict: 'E',
        require: 'ngModel',
        link: function (scope, el, attrs, controller){
            controller.$render = function(){
                var data = controller.$modelValue
                var codeLen = 0, descLen = 0;
                if (data.code){
                  codeLen = data.code.length
                }
              if (data.desc){
                descLen = data.desc.length
              }  
                console.log(descLen, codeLen);                      
            }            
        }
    }
})

フィドル： http： //jsfiddle.net/dj6mX/481/

4

1 に答える 1

1

$ renderを使用したことはありませんが、ng-changeを使用してtextInputで関数を呼び出し、 countChange関数を作成してテキストの長さをカウントします。

HTMLの例

<div ng-app="miniapp">
  <div ng-controller="Ctrl">
    <form>
      <label for="desc">Description</label>
      <textarea ng-change="countChange()" id="desc" ng-model="form.desc"></textarea>
      <charcount ng-model="form">
      <label for="code">Code</label>
      <input id="code" ng-change="countChange()" ng-model="form.code"/>               
    </form>
    <p id="preview">Some filler text here user input {{form.desc}}
      <span ng- show="form.code">
        Some optional text here plus code {{form.code}}
      </span>
    </p>
  </div>
</div>​

ディレクティブで

var app = angular.module('miniapp', []);

function Ctrl($scope) {

}

app.directive('charcount', function(){
    return {
        restrict: 'E',
        require: 'ngModel',
          controller: function($scope) {            
                $scope.countChange= function() {
                    var codeLen = 0;
                    var descLen = 0;                     
                    if($scope.form.desc){
                    descLen = $scope.form.desc.length;
                    }
                    if($scope.form.code){
                    codeLen = $scope.form.code.length;
                    }
                   console.log(codeLen,descLen);     
                }

            },        
        link: function (scope, el, attrs, controller){

        }       
 }})

申し訳ありませんが、私は英語が苦手ですが、これがお役に立てば幸いです。XD

于 2012-12-12T15:53:39.583 に答える