2

テキスト型の入力を含むテンプレートをビューに追加するディレクティブを作成しています。このディレクティブでは、テキスト フィールド入力が指定された最大長設定を超えている場合にエラー通知用にスパン クラスを追加しようとしています。次のようなコードがあります。

<div ng-app="app">
<form name="userForm" ng-submit="processForm()" novalidate>
    <div use-text-box name="xyz" ng-maxlength="10" required> </div>

    <button type="submit" class="btn btn-success">Submit</button>
</form>
</div>

私のディレクティブは次のようになります。

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

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

              return {
                  replace:true,
                  compile: function(element,attrs) {

                        var name =  attrs.name;

                        var maxLengthError = attrs.hasOwnProperty('ngMaxlength') ? '<span ng-show="userForm.' + attrs.name + '.$error.maxlength" class="help-block">Text is too long. The limit is ' + attrs.ngMaxlength + ' characters.</span>' : '';

                        var htmlText = '<input type="text" name="' + name + '" ng-maxlength="' + attrs.ngMaxlength + '" required />' + 
                                            maxLengthError;

                        element.replaceWith(htmlText);

                }
              };
});

しかし、上記のコードでは、ディレクティブは入力テキスト フィールドなどを生成しています。問題はありません。ただし、最大長が 10 を超える場合、エラー メッセージは表示されません。何が間違っていますか?

上記の例の jsfiddle へのリンクは次のとおりです: http://jsfiddle.net/fB45J/3/

4

1 に答える 1

5

ディレクティブを学習して理解しようとしているだけなのかどうかはわかりませんが、目的を達成するためにディレクティブは必要ありません。

ディレクティブのないフィドルは次のとおりです。http://jsfiddle.net/mikeeconroy/fB45J/7/

<div ng-app="app">
    <ng-form name="userForm" novalidate role="form" ng-controller="myFormCtrl">
        <div>
            <p class="text-muted">Enter in some text then remove it.  You need to make it such that Angular sees the form as "dirty" and then tries validate the form.</p><br>
        </div>
        <div>
            <input type="text" name="xyz" ng-model="xyz" maxlength="10" required>
            <span ng-show="userForm.xyz.$dirty && userForm.xyz.$error.required && userForm.xyz.$invalid" style="color: #900;">This field is required!</span>
        </div>

        <br />   <br />  
        <button type="button" ng-click="processForm()" class="btn btn-success">Submit</button>
    </ng-form>
</div>

アングラーはこちら。フォーム要素の「$dirty」がどのように機能するかを示すだけで、何もしません。

var app = angular.module('app', []);
app.controller('myFormCtrl',function($scope,$element){
    $scope.form = $element.controller('form');
    $scope.processForm = function(){
        // set form to dirty
        $scope.form.xyz.$dirty = true;
        console.log('Processing!');
    };
});

編集:ディレクティブアプローチを使用した修正は次のとおりです

http://jsfiddle.net/mikeeconroy/fB45J/8/

app.directive('useTextBox', function($compile,$timeout) {

          return {
              replace:true,
              scope: false,
              link: function(scope,element,attrs) {

                    var name =  attrs.name;

                    var maxLengthError = attrs.hasOwnProperty('ngMaxlength') ? '<span ng-show="userForm.' + attrs.name + '.$error.maxlength" class="help-block">The limit is ' + attrs.ngMaxlength + ' characters.</span>' : '';

                  var htmlText = '<div><input type="text" id="' + name + '" name="' + name + '" ng-maxlength="' + attrs.ngMaxlength + '" ng-model="test_' + attrs.name + '" required>' +   maxLengthError + '</div>';

                  $compile(htmlText)(scope,function(_element,_scope){
                    element.replaceWith(_element);
                  });

            } // end link
          };
});

$compileディレクティブに挿入し、それを使用して HTML をコンパイルし、正しいスコープで挿入する必要があります。_elementコンパイルされた新しい要素になります。

$compile(htmlText)(scope,function(_element,_scope){
    element.replaceWith(_element);
});

compile編集:ディレクティブのプロパティのみを使用した別の例を次に示します

http://jsfiddle.net/mikeeconroy/dzP9L/1/

あなたの例とこの例の違いは、フォームのコントローラーの導入にあるようです。

于 2014-03-24T14:13:14.437 に答える