Reduzieren Sie die Anzahl des Modell Updates mit einem Farbwähler

Question

ich eine Standard-HTML-Farbauswahl in meiner Anwendung verwenden:

<input type="color" ng-model="vm.currentUser.color" /> 

Wenn ich die Taste dieser Farbauswahl klicken und die Farbe manuell ändern, dann ist das Modell sehr oft aktualisiert. Da ich eine Uhr auf vm.currentUser.color habe, wird die entsprechende Methode auch sehr oft aufgerufen, und das ist problematisch.

Gibt es eine Möglichkeit, die Modellvariable nur festzulegen, wenn auf die Schaltfläche OK des Farbwählers geklickt wird?

Answer 1

Sie ng-change auf diesem Feld verwenden können, da es nur nach der Farbe Pop-up löst geschlossen ist und wenn eine Änderung auftritt (egal, wie oft Sie die Farbe in dem Pop-up aus): http://plnkr.co/edit/AjDgoaUFky20vNCfu04O?p=preview

angular.module('app', []) 
 
    .controller('Ctrl', function($scope, $timeout) { 
 
    $scope.x = '#ff0000'; 
 
    $scope.res = ''; 
 
    $scope.a = function(x) { 
 
     console.log(x); 
 
     $scope.res = 'Color changed to ' + x; 
 
     $timeout(function(){$scope.res = ''}, 2000); 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="Ctrl"> 
 
    <input type="color" ng-model="x" ng-change="a(x)"> 
 
    <p>{{res}}</p> 
 
</div>

Answer 2

Seit AngularJS 1.3.0-beta.6 gibt es eine ngModelOptions Richtlinie perfekt passend zu deinem Problem. Sie können "tun, wie Modellupdates durchgeführt werden", was genau das ist, wonach Sie suchen.

Zum Beispiel können Sie das Modell nur aktualisieren, wenn sich der Wert nach einer angemessenen Zeit nicht ändert. Ich werde hier einen Wert von 500 Millisekunden verwenden, um den Effekt wirklich sichtbar zu machen, aber in der Praxis scheint ein niedrigerer sinnvoller zu sein.

<input 
    type="color" 
    ng-model="color" 
    ng-model-options="{debounce: 500}" 
/>