2016-08-03 13 views
0

私のmodel.fieldは、ユーザーが入力要素に入力するだけでなく、バ​​ックグラウンドで他の機能によって変更することもできます。ユーザーが入力に変更を入力しているとき、それらのバックグラウンド関数によって行われたモデルの変更は無視したいと思います。例えば:編集中に入力が更新されないようにする

$scope.model = { 
    field: 'val1' 
} 

HTML

<input ng-model="model.field" ...> 

IE:

  • model.fieldが値 'VAL1'
  • を持つユーザーが入力を編集を開始(それはアクティブである)
  • モデルは他の手段によって 'val2'に変更されます
  • 新しい値が入力に表示されず、 'val1'が表示されます
  • 次のキーストロークは、model.fieldにあるものを上書きします。
  • model.fieldは現在の要素にフォーカスがあるときに、モデルを無視$フォーマッタを追加「ヴァラ」
+0

値を変更していますか?局所的なものであれば、 'ng-change'をトリガとしてローカルフラグを' true'に設定し、 'ng-blur'をトリガとして' false'を設定することができます。フィールドを更新する前に、このフラグの状態を確認してください。それは何かリモート(2人のユーザーが同じレコードを編集している場合)の場合は、あなたのサーバーまたはデータベース(または何でも)にいくつかのタイプのレコードロックロジックを実装する必要があります。 – Lex

+0

Lexが提案したアプローチに同意すると、ngForm APIをハックして、ユーザーが積極的に編集しているかどうかを確認することもできます。ここで非常にハッキーな例http://plnkr.co/edit/lFbcmjCUcvn68nRPbkPf?p=preview –

+0

'ng-model'を拡張して、' ng-blur'イベントが発生するまで双方向バインディングを無効にする方法を探しています: https://github.com/Plippe/extends-ng-model –

答えて

0

を値を持つうまく動作するようです:あなたは、その後にディレクティブを追加

angular.module('myApp').directive('ngModelIgnoreWhenActive', function() { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function(scope, element, attributes, ngModelCtrl) { 

      //Track if the element has focus. 
      //True when the user is typing into the field; false otherwise 
      scope.hasFocus = false; 
      element.on('focus', function(event) { 
       scope.hasFocus = true; 
      }); 
      element.on('blur', function(event) { 
       scope.hasFocus = false; 
      }); 

      //Formats value before shown in view 
      // If the element has focus, keep it's existing value 
      var myFormatter = function(newValue) { 
       return scope.hasFocus && element && element[0] ? element[0].value : newValue; 
      } 

      ngModelCtrl.$formatters.push(myFormatter); 
     } 
    }; 
}); 

関連するすべての入力:https://github.com/Plippe/extends-ng-model/blob/master/src/extends-ng-model/ng-model-formatter-parser/ng-model-timestamp.js

<input ng-model="model.field" ng-model-ignore-when-active> 

は、ここに示されている拡張-NG-モデルのタイムスタンプフォーマッタ上のコードをベースに

関連する問題