AngularJS: когда использовать $ применять в «прокручивать» события

Question

У меня есть директива, которая добавляет «фиксированный» класс по:

ng-class='{ "fixed": fixed }' 

Эта директива имеет следующую функцию:

angular.element($window) 
    .on('scroll', function() { 
    if (this.pageYOffset >= 480) { 
     if (!scope.fixed) { 
     scope.fixed = true; 
     scope.$apply(); 
     } 
    } else { 
     if (scope.fixed) { 
     scope.fixed = false; 
     scope.$apply(); 
     } 
    } 
    }); 

Мои вопрос в том, я должен применить scope.$apply(), как это, так что это срабатывает только когда мои изменения переменных, или это нормально, просто написать:

angular.element($window) 
    .on('scroll', function() { 
    if (this.pageYOffset >= 480) { 
     scope.fixed = true; 
    } else { 
     scope.fixed = false; 
    } 
    scope.$apply(); 
    }); 

Может быть, есть использование scope.$watch, о котором я не знаю?

Answer 1

Это не имеет смысла называть scope.$apply(), если обновление не производится. Поэтому я хотел бы предложить использовать первый подход, который:

angular.element($window) 
    .on('scroll', function() { 
    if (this.pageYOffset >= 480) { 
     if (!scope.fixed) { 
     scope.fixed = true; 
     scope.$apply(); 
     } 
    } else { 
     if (scope.fixed) { 
     scope.fixed = false; 
     scope.$apply(); 
     } 
    } 
    }); 

Answer 2

Да. вам необходимо запустить цикл дайджеста вручную. Когда вы изменяете область видимости через события. используя scope.$apply, которые внутренне вызывают цикл дайджеста &, затем обновите все связанные с областью привязки для просмотра.

Простое изменение угловой области снаружи в угловом контексте необходимо будет запустить цикл дайджеста.

1. Какой подход лучше всего?

Ваш второй способ подходит для меня.

2. Возможно, есть какое-то использование объема. $ Watch, о котором я не знаю?

Да, вы можете использовать часы, которые будут выполнять грязные проверки & всякий раза, когда значение получает изменить его будет срабатывать функцию. Используя часы, вам не нужно беспокоиться о цикле дайджеста.

Добавление окна часов pageYOffset property, вместо использования scroll event.

Код

$scope.$watch(function(){ return $window.pageYOffset }, function(newVal, oldVal){ 
     if (newVal >= 480) { 
      scope.fixed = true; 
     } else { 
      scope.fixed = false; 
     } 
}); 

Answer 3

Конечно, вы не должны дублировать scope.$apply() в каждой if-else ветви, так что ваш второй пример имеет больше смысла. Однако вы можете упростить его дальше:

angular.element($window).on('scroll', function() { 
    scope.fixed = this.pageYOffset >= 480; 
    scope.$apply(); 
}); 

.. потому что выражение this.pageYOffset >= 480 уже решает true или false.