0

入力が変更されるたびにいくつかの機能を実行するために、入力に時計を配置しようとしています。ただし、この入力には、ページが読み込まれるときに値が含まれます (この例では、ユーザーの電子メール アドレスと共に読み込まれます)。

<input type="email" name="email" value="user@example.com" ng-model="email">

次に、私のフォームコントローラーで：

$scope.$watch('email', function(newValue, oldValue) {
    console.log('Email address has been changed.');
    console.log('Old value: ', oldValue);
    console.log('New value: ', newValue);
}, true);

ページの読み込み時に、上記の 3 行はコンソールからログアウトされ、両方ともoldValue未定義newValueです。次に、フォーム フィールドは空のままになります。

Angular に入力の既存の値を保持させ、ウォッチをアタッチするときに何も置き換えないようにするにはどうすればよいですか?

4

1 に答える 1

2

問題は時計ではありません。問題は、これが角度の予期された使用法ではないことです。これが正しい手順です。

app.controller('myCtrl', function($scope) {
  $scope.email = 'user@example.com';
});

値を削除しているのはデータバインディング自体であり、必要に応じて $scope.email の値に置き換えています。

入力フィールド自体から値を取得する必要がある場合は、コントローラーがロードされる前にその値をキャッシュする必要があります。問題を引き起こすのはコントローラー自体です。

以下に例を示します - クリックcachedValueします (とをコメントアウトして$scope.email、コントローラー/ng-model が値を空白にすることを確認します)。

最もクリーンな解決策は、ng-model を使用せず、代わりに初期値を $scope に設定する独自のディレクティブを作成し、ng-model を適用して期待どおりに更新することです。

退屈だったので指令書を書きました。

app.directive('initModel', function($compile) {
  return {
    link: function(scope, element, attrs) {
      scope[attrs.initModel] = element[0].value;
      element.attr('ng-model', attrs.initModel);
      element.removeAttr('init-model');
      $compile(element)(scope);
    }
  };
});

<input type="email" name="email" value="user@example.com" init-model="email">

デモはこちら（クリック）。

于 2013-09-11T05:37:01.827 に答える