Сократите количество обновлений модели с выбором цвета

Question

я использую стандартный HTML выбор цвета в моем приложении:

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

Если я нажимаю кнопку этого выбора цвета и вручную изменить цвет, то модель обновляется очень часто. Поскольку у меня есть часы на vm.currentUser.color, соответствующий метод также вызывается очень часто, и это проблематично.

Есть ли способ установить переменную модели только при нажатии кнопки OK выбора цвета?

Answer 1

Вы можете использовать ng-change на этом поле, как это вызывает только после того, как цвет всплывающее окно закрывается, и если происходит изменение (независимо от того, сколько раз вы изменить цвет внутри всплывающего окна): 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

С AngularJS 1.3.0-beta.6, есть ngModelOptions директива, отлично подходит для вашей проблемы. Это позволяет вам «настраивать, как выполняются обновления модели», что идеально подходит для вас.

Например, вы можете обновить модель только в том случае, если значение не изменяется после разумного количества времени. Я использую здесь значение 500 миллисекунд, чтобы сделать эффект действительно очевидным, но на практике более подходящим является более низкий.

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