Ручка несколько $ watch в Angularjs

Question

У меня есть три модели startDate, endDate, durationMillis в области. Если какое-либо значение изменяется при использовании, мне нужно рассчитать другую модель с помощью $ watch.

$scope.$watch('startDate', function() 
{ 
    $scope.endDate = new Date($scope.startDate.getTime() + $scope.durationMillis); 
}); 

$scope.$watch('endDate', function() 
{ 
    $scope.durationMillis = $scope.endDate.getTime() + $scope.startDate.getTime(); 
}); 

$scope.$watch('durationMillis', function() 
{ 
    $scope.startDate = new Date($scope.endDate.getTime() - $scope.durationMillis.getTime()); 
}); 

Вот моя проблема, когда пользователь изменяет дату начала даты/окончания/продолжительность, $ часы вычисляемых атрибутов (не изменен пользователем) была вызвана рекурсивно.

Answer 1

Единственным решение Я нашел для такого рода задачи с использованием внешнего флага и следующим уродливым кодом:

var triggeredBySystem = false; 

$scope.$watch('startDate', function() { 
    if(!triggeredBySystem) { 
     $scope.endDate = new Date($scope.startDate.getTime() + $scope.durationMillis); 
     triggeredBySystem = true; 
    } 
    else { 
     triggeredBySystem = false; 
    } 
}); 

$scope.$watch('endDate', function() { 
    if(!triggeredBySystem) { 
     $scope.durationMillis = $scope.endDate.getTime() + $scope.startDate.getTime(); 
     triggeredBySystem = true; 
    } 
    else { 
     triggeredBySystem = false; 
    } 
}); 

$scope.$watch('durationMillis', function() { 
    if(!triggeredBySystem) { 
     $scope.startDate = new Date($scope.endDate.getTime() - $scope.durationMillis.getTime()); 
     triggeredBySystem = true; 
    } 
    else { 
     triggeredBySystem = false; 
    } 
}); 

я был бы заинтересован в более эффективных решениях самого ...

(Я бы реорганизовал общий код выше, конечно, но здесь я просто демонстрирую принцип.)

Answer 2

Хорошо, так что я предполагаю, что решение для цикла может быть unwatch других часов, а затем повторно INIT часов (до сих пор чувствует себя грязными):

блог для отвязать: http://www.bennadel.com/blog/2480-unbinding-watch-listeners-in-angularjs.htm

function init(){ 
    $scope.unbindStart = $scope.$watch('startDate', function() 
    { 
     $scope.unbindStart(); 
     $scope.unbindEnd(); 
     $scope.unbindDuration(); 
     $scope.endDate = new Date($scope.startDate.getTime() + $scope.durationMillis); 

     $timeout(setupWatch,10); 
    }); 

    $scope.unbindEnd = $scope.$watch('endDate', function() 
    { 
     $scope.unbindStart(); 
     $scope.unbindEnd(); 
     $scope.unbindDuration(); 
     $scope.durationMillis = $scope.endDate.getTime() + $scope.startDate.getTime(); 

     $timeout(setupWatch,10); 
    }); 

    $scope.unbindDuration = $scope.$watch('durationMillis', function() 
    { 
     $scope.unbindStart(); 
     $scope.unbindEnd(); 
     $scope.unbindDuration(); 
     $scope.startDate = new Date($scope.endDate.getTime() - $scope.durationMillis.getTime()); 

     $timeout(setupWatch,10); 
    }); 
} 

function setupWatch(){ 

    init(); 

}