1

タイトルが明確でない場合は申し訳ありませんが、私がやろうとしていることは次のとおりです。

複数のサインアップ フォームがあり、それぞれにパスワード フィールドがあります。ここで、パスワードにいくつかの要件を設定したいと思います。5 より長いパスワードを取得したい。

私は持っている：

<form name="myForm">

  <!-- some elements -->

  <input type="password" required ng-model="user.password" name="password" ng-minlength="5">

そしてその直後：

<div ng-show="myForm.password.$error.minlength">    
    Password is too short.    
</div>

<!-- some other elements -->

</form>

このエラー メッセージをディレクティブにリファクタリングしようと思ったのですが、唯一の問題は、フォームの名前をディレクティブに正しく渡すことができないことです。

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

myApp.directive('passwordLengthError', [function () {
    return {
        restrict: 'E',
        replace: true,
        template:'<div ng-show="{{form}}.password.$error.minlength">Password is too short.</div>',
        scope: {
            form: '@'
        }
    };
}]);

そして私はそれを次のように呼びます：

<div>
   <password-length-error form="myForm"/>
</div>

Chrome の Web インスペクタをチェックインすると、パラメータがそこにあることがわかります。

<div ng-show="myForm.password.$error.minlength">

ただし、実際には機能しません。パスワードが 5 文字未満の場合、メッセージがポップアップ表示されません。

これを機能させる方法はありますか、それとも不可能ですか? 前もって感謝します。

4

1 に答える 1

1

アイソレート スコープの@は角度式を評価しようとしています。文字列を渡すだけなので、スコープ変数をディレクティブの属性値に直接設定するだけで、スコープを分離したり、属性を評価したりする必要はありません。

そう：

scope.form = attrs.form;

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

app.directive('passwordLengthError', [function () {
    return {
        restrict: 'E',
        replace: true,
        template:'<div ng-show="{{form}}.password.$error.minlength">Password is too short.</div>',
        link: function(scope, element, attrs){
          scope.form = attrs.form  // the attribute is a string, so, YAY
        }
    };
}]);

あなたのデモ

于 2013-07-15T01:17:59.590 に答える