AngularJS 컨트롤러의 'this'vs $ scope

질문 : AngularJS 컨트롤러의 'this'vs $ scope

---

AngularJS 홈페이지의 "Create Components"섹션에 다음 예제가 있습니다.

controller: function($scope, $element) {
  var panes = $scope.panes = [];
  $scope.select = function(pane) {
    angular.forEach(panes, function(pane) {
      pane.selected = false;
    });
    pane.selected = true;
  }
  this.addPane = function(pane) {
    if (panes.length == 0) $scope.select(pane);
    panes.push(pane);
  }
}

어떻게 '공지 사항 select 방법에 추가됩니다 $scope ,하지만 addPane 방법에 추가됩니다 this . $scope.addPane 변경하면 코드가 깨집니다.

문서에는 실제로 차이가 있다고 나와 있지만 차이점이 무엇인지는 언급하지 않습니다.

이전 버전의 Angular (1.0 RC 이전)에서는 this $scope 메서드와 번갈아 사용할 수 있었지만 더 이상 그렇지 않습니다. 범위에 정의 된 메서드 내에서 this 및 $scope 는 상호 교환 할 수 this 를 $scope ) 컨트롤러 생성자 내부에서는 그렇지 않습니다.

AngularJS 컨트롤러에서 this 과 $scope 는 어떻게 작동합니까?

답변

---

this 과 $scope 는 어떻게 작동합니까?"

짧은 대답 :

• this
  • 컨트롤러 생성자 함수가 호출되면 this 컨트롤러입니다.
  • A의 정의 된 함수 때 $scope 객체를 호출, this 은 "함수가 호출 된 효과 범위"입니다. 이것은 함수가 정의 된 $scope 일 수도 있고 아닐 수도 있습니다. 따라서 함수 내에서 this 와 $scope 는 동일하지 않을 수 있습니다.
• $scope
  • 모든 컨트롤러에는 연결된 $scope 개체가 있습니다.
  • $scope 에서 모델 속성 및 함수 / 동작을 설정하는 역할을합니다.
  • $scope 개체 (및 프로토 타입 상속이 실행중인 경우 부모 범위 개체)에 정의 된 메서드 만 HTML /보기에서 액세스 할 수 있습니다. 예 : ng-click , 필터 등에서

긴 대답 :

컨트롤러 함수는 JavaScript 생성자 함수입니다. 생성자 함수가 실행될 때 (예 : 뷰가로드 될 때), this (즉, "함수 컨텍스트") 컨트롤러 객체로 설정됩니다. 따라서 "tabs"컨트롤러 생성자 함수에서 addPane 함수가 생성 될 때

this.addPane = function(pane) { ... }

$ scope가 아닌 컨트롤러 개체에 생성됩니다. 뷰는 addPane 함수를 볼 수 없으며 $ scope에 정의 된 함수에만 액세스 할 수 있습니다. 즉, HTML에서는 작동하지 않습니다.

<a ng-click="addPane(newPane)">won't work</a>

"tabs"컨트롤러 생성자 함수가 실행 된 후 다음과 같이됩니다.

검은 색 점선은 프로토 타입 상속을 나타냅니다. 격리 범위는 프로토 타입으로 Scope 에서 상속합니다. (HTML에서 지시문이 발생한 유효 범위에서 프로토 타입으로 상속되지 않습니다.)

이제 pane 지시문의 링크 함수는 tabs 지시문과 통신하려고합니다 (실제로는 탭에 영향을 미쳐 $ scope를 어떤 식 으로든 분리해야 함). 이벤트를 사용할 수 있지만 다른 메커니즘은 pane 지시문에 탭 컨트롤러가 require (pane 지시문에 tabs $ scope require 하는 메커니즘이없는 것 같습니다.)

따라서 이것은 질문을합니다. 탭 컨트롤러에만 액세스 할 수있는 경우 탭 격리에 액세스하려면 $ scope (정말 원하는 것입니다)를 어떻게 얻을 수 있습니까?

음, 빨간색 점선이 답입니다. addPane () 함수의 "범위"(여기서 JavaScript의 함수 범위 / 종료를 참조 함)는 $ scope를 분리하는 탭에 대한 함수 액세스를 제공합니다. 즉, addPane ()은 addPane ()이 정의 될 때 생성 된 클로저로 인해 위 다이어그램의 "탭 IsolateScope"에 액세스 할 수 있습니다. (대신 tabs $ scope 객체에 addPane ()을 정의했다면 pane 지시문은이 함수에 액세스 할 수 없으므로 $ scope 탭과 통신 할 방법이 없습니다.)

질문의 다른 부분에 답하려면 how does $scope work in controllers? :

$ scope에 정의 된 함수 내에서 this "함수가 호출 된 위치 /시기에 유효한 $ scope"로 설정됩니다. 다음 HTML이 있다고 가정합니다.

<div ng-controller="ParentCtrl">
   <a ng-click="logThisAndScope()">log "this" and $scope</a> - parent scope
   <div ng-controller="ChildCtrl">
      <a ng-click="logThisAndScope()">log "this" and $scope</a> - child scope
   </div>
</div>

그리고 ParentCtrl (Solely)에는

$scope.logThisAndScope = function() {
    console.log(this, $scope)
}

첫 번째 링크를 클릭하면 "함수가 호출 될 때 적용 되는 범위"가 ParentCtrl 과 관련된 범위이기 때문에 this 와 $scope 가 동일하다는 것을 보여줍니다.

두 번째 링크를 클릭하면 " 함수가 호출 될 때 적용 되는 범위"가 ChildCtrl this 과 $scope 는 동일하지 않습니다 . 그래서 여기, this 설정되어 ChildCtrl 의 $scope . 메서드 내에서 $scope 는 여전히 ParentCtrl 의 $ scope입니다.

깡깡이

특히 ng-repeat, ng-include, ng-switch 및 지시문이 모두 자신의 자식 범위를 만들 수 있다는 점을 고려하면 $ scope가 영향을받는 것이 혼란스러워 지므로 $ scope에 정의 된 함수 내에서 this 사용하지 않으려 고합니다. .

출처 : https://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers