AngularJS
컨트롤러의 자체 변수 또는이 변수

소개

자기 변수의 목적 이해하기

"컨트롤러를 구문으로"사용하는 경우 ng-controller 지시문을 사용할 때 컨트롤러에서 html로 별칭을 지정합니다.

<div ng-controller="MainCtrl as main">
</div>

그런 다음 컨트롤러 인스턴스를 나타내는 기본 변수에서 속성 및 메서드에 액세스 할 수 있습니다. 예를 들어 컨트롤러의 인사말 속성에 액세스하여 화면에 표시해 봅시다.

<div ng-controller="MainCtrl as main">
    {{ main.greeting }}
</div>

이제 컨트롤러에서 컨트롤러 인스턴스의 인사말 속성에 값을 설정해야합니다 ($ scope 또는 다른 것과 반대).

angular
.module('ngNjOrg')
.controller('ForgotPasswordController',function ($log) {
  var self = this;

  self.greeting = "Hello World";
})

올바르게 HTML 표시를하기 위해 우리는 우리의 컨트롤러 본체의 내부에 인사말 속성을 설정하는 데 필요한. 나는 이것에 대한 참조를 보유하고있는 self 라는 이름의 중간 변수를 생성한다. 왜? 다음 코드를 고려하십시오.

angular
.module('ngNjOrg')
.controller('ForgotPasswordController',function ($log) {
  var self = this;

  self.greeting = "Hello World";

  function itsLate () {
    this.greeting = "Goodnight";  
  }

})

위의 코드에서 itsLate 메서드가 호출 될 때 화면의 텍스트가 업데이트되지만 사실은 그렇지 않을 것이라고 예상 할 수 있습니다. JavaScript는 함수 수준 범위 지정 규칙을 사용하므로 itsLate 내부의 "this"는 메서드 본문 외부의 "this"와 다른 것을 참조합니다. 그러나 self 변수를 사용하면 원하는 결과를 얻을 수 있습니다.

 angular
.module('ngNjOrg')
.controller('ForgotPasswordController',function ($log) {
  var self = this;

  self.greeting = "Hello World";

  function itsLate () {
    self.greeting = "Goodnight";  
  }

})

이것은 컨트롤러에서 "자체"변수를 사용하는 것의 아름다움입니다. 컨트롤러에서 언제 어디서나이 변수에 액세스 할 수 있으며 컨트롤러 인스턴스를 참조하고 있는지 확인할 수 있습니다.