Ridurre il numero di modello si aggiorna con un selettore di colori

Question

Io uso un selettore colore standard HTML nella mia domanda:

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

Se fa clic sul pulsante di quel selettore colore e modificare manualmente il colore, allora il modello è aggiornato molto spesso. Dato che ho un orologio su vm.currentUser.color, il metodo corrispondente viene anche invocato molto spesso, e questo è problematico.

C'è un modo per impostare la variabile del modello solo quando si fa clic sul pulsante OK del selettore colori?

Answer 1

È possibile utilizzare ng-change su quel campo come si innesca solo dopo la comparsa del colore è chiuso e se si verifica un cambiamento (non importa quante volte si cambia il colore all'interno del pop-up): 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

Dal AngularJS 1.3.0-beta.6, c'è una direttiva ngModelOptions, perfettamente adatto al tuo problema. Ti permette di "accordare come sono fatti gli aggiornamenti del modello", che è perfettamente quello che stai cercando.

Ad esempio, è possibile aggiornare il modello solo se il valore non cambia dopo un periodo di tempo ragionevole. Userò qui un valore di 500 millisecondi per rendere l'effetto davvero evidente, ma in pratica uno più basso sembra più appropriato.

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