Не могу заставить $rootScope работать внутри angular.element с компонентом ECMA 6 и angular 1.5

Я только начал использовать новую версию Laravel angular. Я пытаюсь добавить код для изменения переменной rootScope при прокрутке страницы вниз. это то, что у меня есть до сих пор.

$onInit(){
    this.$rootScope.showTestBanner = true;
    var $rootScope = this.$rootScope;

    angular.element(this.$window).bind("scroll", function() {
        if (this.pageYOffset >= 20) {
            this.$rootScope.showTestBanner = false;
        }
    });
}

Проблема в том, что this.$rootScope не определен внутри angular.element. Я пытался назначить this.$rootScope вне angular.element, чтобы его можно было использовать внутри функции привязки, но тогда привязка данных, похоже, работает. Любые предложения будут высоко ценится. Если ответ очевиден, извините меня, я новичок в angular 1.5 и ECMA6.


javascript angularjs ecmascript-6 angularjs-1.5
person Sam Roberts    schedule 27.05.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Есть лучший способ установить лексическое значение this, используя новый синтаксис ES6 lambda =>. Измените свой код, чтобы использовать лямбда, как показано ниже, и вы получите правильное значение this:

$onInit = () => {
  this.$rootScope.showTestBanner = true;
  let $rootScope = this.$rootScope;

  angular.element(this.$window).bind("scroll", function() {
    if (this.pageYOffset >= 20) {
        this.$rootScope.showTestBanner = false;
    }
  });
}

Значение this лексически правильно установлено в constructor, но не в других методах класса. Поэтому вам нужно изменить все свои методы, чтобы использовать =>, чтобы иметь правильное лексическое значение этого

person Aditya Singh    schedule 27.05.2016
comment
Синтаксис стрелки должен быть в обработчике прокрутки, а не в функции $onInit (которая предположительно работает нормально, если вызывается прокрутка) - person CodingIntrigue; 27.05.2016