入力がフォーカスされているときにモデルが更新されない

入力時にフォーカスが当たっているときにレンダリングをブロックする指示文を作成しています。入力がフォーカスされているときにモデルが更新されない

ユースケースは、バックエンドから頻繁なライブアップデートを受け取り、ng-modelバインディングのためにユーザーが入力に書き込んでいるものをすべて上書きするというケースです。 ng-keydown="($event.keyCode === 13) ? $ctrl.setItem($event, $ctrl.item) : return"を使用してEnterキーを押して更新を送信します。ここで$ ctrl.setItemはバックエンドに要求を送信します。

私はそれが欲しいと思っていたような気がしました。編集した後に入力をぼかすと驚くべき結果しか得られません。

私は$の間隔を使用してバックエンドの更新をシミュレートplunker作っ：あなたが最初の入力フィールドで編集を行うと、新しい「更新」のために、数秒待ってぼかした場合、その後、https://plnkr.co/edit/XNFA3bQtbGliAhS0uVmP?p=preview

app.directive('noUpdatesWhenFocused', function() { 
    return { 
    restrict: 'A', 
    require: '?ngModel', 
    link: function(scope, element, attrs, ngModel) { 
     if (!ngModel || element[0].type !== 'text') { 
     return; 
     } 

     var hasFocus = false; 
     element.on('focus', function() { 
     hasFocus = true; 
     }); 
     element.on('blur', function() { 
     hasFocus = false; 
     ngModel.$render(); 
     }); 

     ngModel.$render = function() { 
     if (!hasFocus) { 
      element.val(ngModel.$viewValue); 
     } 
     }; 
    } 
    }; 
});

を最後のモデルの更新ではなく、最後のビューの編集の状態に戻ります。私たちは常に最新のアップデートをバックエンドから見せたいので、これを修正する必要がありますが、私は困惑しています。

出典

2016-07-03 Sammi

申し訳ありません。ぼかしイベントの前に、ngModel。$ pasersが起動されていました。だから私はparserが前回から変更されていなければviewValueを無視するパーサを追加しました。

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

 
app.directive('noUpdatesWhenFocused', function() { 
 
    return { 
 
    restrict: 'A', 
 
    require: '?ngModel', 
 
    link: function(scope, element, attrs, ngModel) { 
 
     if (!ngModel || element[0].type !== 'text') { 
 
     return; 
 
     } 
 

 
     var hasFocus = false; 
 
     element.on('focus', function() { 
 
     hasFocus = true; 
 
     }); 
 
     element.on('blur', function() { 
 
     hasFocus = false; 
 
     ngModel.$render(); 
 
     }); 
 
     
 
     ngModel.$render = function() { 
 
     if (!hasFocus) { 
 
      element.val(ngModel.$viewValue); 
 
     } 
 
     }; 
 
     
 
     var vValue = ngModel.$viewValue; 
 
     ngModel.$parsers.unshift(function(viewValue) { 
 
     var returnValue = viewValue === vValue ? ngModel.$modelValue : viewValue; 
 
     ngModel.$setViewValue(returnValue); 
 
     ngModel.$render(); 
 
     vValue = viewValue; 
 
     return returnValue; 
 
     }); 
 
    } 
 
    }; 
 
}); 
 

 
app.run(function($rootScope, $interval) { 
 
    $rootScope.item = 'item'; 
 
    $interval(function(count) { 
 
    if (typeof count === 'number') { 
 
     if($rootScope.item) { 
 
     $rootScope.item = $rootScope.item + '' + count; 
 
     } 
 
     else { 
 
     $rootScope.item = '' + count; 
 
     } 
 
     console.log($rootScope.item); 
 
    } 
 
    },3000); 
 
});

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 
<body ng-app="myApp"> 
 
    <form name="myForm"> 
 
    <input 
 
     no-updates-when-focused 
 
     name="item1" 
 
     ng-model="item" 
 
     size="50" 
 
     required> 
 
    </input> 
 
    <span ng-show="myForm.item1.$error.required">Required!</span> 
 
    </br> 
 
    <input 
 
     name="item2" 
 
     ng-model="item" 
 
     size="50" 
 
     required> 
 
    </input> 
 
    <span ng-show="myForm.item2.$error.required">Required!</span> 
 
    </form> 
 
</body> 
 
</html>

出典

2016-07-04 12:18:03 Sammi

入力がフォーカスされているときにモデルが更新されない

答えて

関連する問題