3

私の主な目標は、チェックボックスをクリックしてパスワードの入力タイプをテキストに変更することです。

ディレクティブで DOM 操作を行う必要があることを理解し、AngularJS を読んだ後: 入力タイプを変更できない

次のようにディレクティブを見つめました（すべてのコードは jsfiddleに含まれています）

 <div ng-app="SignComponents">
     <bca-sign-up-password> </bca-Sign-Up-Password>
 </div>

しかし、私はまだそれを機能させていません。. . 助言がありますか？私は角度のある方法でそれを解決していますか？

ありがとう！

4

3 に答える 3

3

まず、メソッドはプロパティではないため、コールバックelement.html内の関数を上書きしていました。scope.$watch第二に、入力タイプを変更するだけで、誰にとっても（あなた自身、Angular、ブラウザー）にとってはるかに簡単です。

http://jsfiddle.net/K6Qgm/6/

scope.$watch('viewPasswordCheckbox', function (newValue) {
    element.find('input')[1].type = newValue ? 'password' : 'text';
});

編集: 古いバージョンの IE を本当にサポートする必要がある場合 (上記は 9 で動作します)、入力を 2 回レンダリングし、次のように表示/非表示にすることができます: http://jsfiddle.net/K6Qgm/7/

function (newValue) {
    var show = newValue ? 2 : 1,
        hide = newValue ? 1 : 2,
        elements = element.find('input');
    elements[hide].style.display = 'none';
    elements[show].style.display = '';
});
于 2013-04-18T17:38:23.443 に答える
2

ng-hideandを使用ng-showすることは、手動で行うよりも優れています。おそらく、ディレクティブ テンプレートの場合は次のようになります。

<div>
  <input
    required
    type="text"
    name="password"
    class="input password"
    placeholder="Password"
    ng-hide="viewPassword"
    ng-model="user.Password"
  >
  <input
    required
    name="password"
    type="password"
    class="input password"
    placeholder="Password"
    ng-show="viewPassword"
    ng-model="user.Password"
  >
  <input type="checkbox" class="btn btn-mini" ng-click="showPassword()">
</div>

リンク機能:

var linker = function(scope, element, attrs){
  scope.viewPassword = true;
  scope.showPassword = function(){
    scope.viewPassword = !scope.viewPassword;
  };
};

作業例プランカー。

于 2013-04-19T14:13:58.547 に答える
0

同じ ng-model=user.password を指す入力タイプ = テキストと入力タイプ = パスワードの 2 番目の 2 つの入力フィールドを作成し、チェックボックス (showpassword) を使用してどの入力を表示するかを制御します。

<input ng-hide="showpassword" type="password" name="password" class="form-control" placeholder="Password"   ng-model="user.password" />
<input ng-show="showpassword" type="text" name="password" class="form-control" ng-model="user.password" />
<input type="checkbox" ng-model="showpassword" ng-checked="false"> Show Password
于 2013-12-23T23:42:58.400 に答える