Как получить $ scope или $ element в событии onblur и запустить функцию в событии onblur? - PullRequest
Новая
       6

Как получить $ scope или $ element в событии onblur и запустить функцию в событии onblur?

1 голос
/ 10 апреля 2020

Я добавил событие onblur во все поля ввода и хочу получить $scope и $element при запуске события onblur. Но когда я использую this.$element для получения элемента, я получаю undefined.

Когда я регистрирую только это, я получаю тег ввода. Как я могу получить $scope и $element для события onblur?

Код: 

constructor($document, $element, $scope) {
   this.$document = $document;
   this.$element = $element;
   this.$scope= $scope;
}

FunCall() {
  const formElements = this.$element[0].querySelectorAll('input');
  const watchElement = angular.element(formElements[0]);
  console.log(this);

  watchElement[0].onblur = function() {
    console.log(this); // html input element
    console.log(this.$scope); // undefined
    console.log(this.$element); // undefined
  };
}

В первом журнале я получаю правильное значение this, то есть контроллер , Во втором журнале внутри события onblur я получаю элемент HTML и получаю undefined для $scope и $element. Как получить контроллер, как первый внутри события onblur?

И я хочу запустить функцию внутри события onblur, но это не сработало: 

watchElement[0].onblur = function() {
    this.runSecondFunction();
};

runSecondFunction() {
 console.log('test 2nd function');
}

1 Ответ

1 голос
/ 10 апреля 2020

function() в javascript также является конструктором. Поэтому вы можете создать объект с помощью new. Например: 

function ImAFunctionButCanBeConstructor() {
  this.foo = 'bar';
  this.print = function() {
    console.log(this.foo);
  }
}

const myObj = new ImAFunctionButCanBeConstructor();
myObj.print();

В случае обработчика событий this ссылается на элемент DOM .

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

class MyComp {
  constructor($document, $element, $scope) {
    this.$document = $document;
    this.$element = $element;
    this.$scope = $scope;

    this.FunCall();
  }

  FunCall() {
    const formElements = this.$element[0].querySelectorAll("input");
    const watchElement = angular.element(formElements[0]);
    //console.log(this);

    watchElement[0].onblur = () => {
      //console.log(this);
      //console.log(this.$scope);
      console.log(this.$element);
    };
  }
}

angular.module("app", []).component("myComp", {
  controller: MyComp,
  template: `
      <input type="text" placeholder="watch me blur" />
    `
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="app" ng-app="app">
  <my-comp></my-comp>
</div>

https://codesandbox.io/s/musing-moore-kohg8?file= / src / index. js

Просто стоит упомянуть Есть больше способов сделать то же самое .

Ссылки

{ ссылка }

...