"this" vs $scope in AngularJS 컨트롤러

"this" vs $scope in AngularJS 컨트롤러

Angular의 "Create Components" 섹션에서JS의 홈페이지는 다음과 같습니다.

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(RC 에서는 Angular(1.0 RC 이전)를 사용할 수 .this 교환할 수 .$scope하지만 더 이상 그렇지 않습니다.에 되어 있는 .this ★★★★★★★★★★★★★★★★★」$scope 가능 「」 「」( 「」)).this로로 합니다.$scope컨트롤러 컨스트럭터 내부에는 없습니다.

는 어떻게 ?this ★★★★★★★★★★★★★★★★★」$scope로 ?JS는요?

요?"this ★★★★★★★★★★★★★★★★★」$scopeJS는?

간단한 답변:

• this
  • 되면, 「」가 호출됩니다.this컨트롤러입니다.
  • 되어 있는 $scope브 is트가 object object object브 object object object object object object object 。this는 '되었을 때 한 기능입니다.이 this( 안 될 수도 가 될 수도 있다.$scope함수가 정의되어 있습니다.에서는요.this ★★★★★★★★★★★★★★★★★」$scope같지 않을 수도 있습니다.
• $scope
  • 있는 「이행」이 .$scope★★★★★★ 。
  • 된 모델 및 을 담당합니다.$scope.
  • 에 되어 있는 $scopeHTML/HTML/HTML/ng-click등 「」

장황한 답변:

자바스크립트때로드될 때), """ (": """)this 「 컨텍스트 오브젝트로 되어 있습니다.(「기능 컨텍스트」)." 컨트롤러 함수에서는 때 addPane 함수가 됩니다.

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

$120이 아닌 컨트롤러 오브젝트에 작성됩니다.뷰는 addPane 함수를 볼 수 없습니다. $scope에 정의된 함수에만 액세스할 수 있습니다.즉, HTML에서는, 이것은 동작하지 않습니다.

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

"탭" 컨트롤러 컨스트럭터 기능이 실행되면 다음과 같은 결과가 나타납니다.

검은색 점선은 프로토타입 상속을 나타냅니다. 분리된 스코프는 프로토타입으로 Scope에서 상속됩니다(HTML에서 명령이 발생한 실제 스코프에서 프로토타입으로 상속되지 않습니다).

이제 창 디렉티브의 링크 함수는 탭 디렉티브와 통신하려고 합니다(즉, 탭이 어떤 식으로든 $scope를 분리해야 합니다).수 , 에 지시문을 입니다.require가 「」( 「」)에의 것 .require120달러입니다.

여기서 의문이 생깁니다.탭 컨트롤러에만 액세스 할 수 있는 경우 $scope를 분리한 탭에 액세스하려면 어떻게 해야 합니까?

자, 빨간 점선이 정답입니다.addPane() 함수의 "scope"(여기서 JavaScript의 함수 범위/클로저 참조)는 $scope를 분리한 탭에 대한 함수 액세스를 제공합니다.즉, addPane()은 addPane()이 정의되었을 때 작성된 닫힘 때문에 위의 그림의 "탭 IsolateScope"에 액세스할 수 있습니다.(대신 탭 $scope 객체에 addPane()을 정의하면 창 디렉티브는 이 함수에 액세스할 수 없으므로 탭 $scope와 통신할 수 없습니다.)

하려면:how does $scope work in controllers?:

에서 $scope는 $scope입니다.this는, 「되어 있습니다.」, 「기능이 호출된 장소/시간」, 「기능이 유효하게 되어 있습니다.를 들어 다음과 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은 (독독)를 가지고 있다.

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

번째 하면 " " " 가 됩니다.this ★★★★★★★★★★★★★★★★★」$scope"함수가 호출되었을 때 유효한 범위"는 이 함수와 관련된 범위이기 때문에 동일합니다.ParentCtrl.

하면 " " "가 표시됩니다.this ★★★★★★★★★★★★★★★★★」$scope"함수가 호출되었을 때 유효한 범위"는 에 관련된 범위이기 때문에 동일하지 않습니다.ChildCtrl, 여기 this로 설정되어 있다.ChildCtrl의 »$scope에서는 그방 . . . . .$scope아직이다ParentCtrl140달러입니다.

만지작거리다

는 안 해요.this특히 ng-timeout, ng-timeout, ng-switch 및 디렉티브가 모두 자신의 자녀 스코프를 생성할 수 있다는 점을 고려하면 어떤 $timeout이 영향을 받는지 혼란스러워지기 때문에 $timeout에 정의된 함수 내부.

에 ' Pane는 'add Pane'이 있기 때문입니다.<pane>★★★★★★ 。

pane는 directive를 합니다.require: '^tabs'부모 디렉티브의 탭컨트롤러 오브젝트를 링크 기능에 배치합니다.

addPane is is is is is 。this그 때문에pane링크 함수에서 확인할 수 있습니다. 후 리 the the pane 함수, " " ", ",addPane는 단지 의의 is of of의 재산이다.tabstabsControllerObject.addPane이 됩니다.따라서 창 디렉티브의 링크 함수는 탭 컨트롤러 개체에 액세스할 수 있으므로 addPane 메서드에 액세스할 수 있습니다.

내 설명이 충분히 명확했으면 좋겠는데..설명하기가 좀 어렵다.

이 두 가지 차이점에 대한 흥미로운 설명과 컨트롤러에 모델을 부착하고 뷰에 모델을 바인딩하기 위해 컨트롤러에 별칭을 붙이는 것에 대한 선호도가 높아지고 있습니다.http://toddmotto.com/digging-into-angulars-controller-as-syntax/가 기사입니다.

메모: 원래의 링크는 아직 존재하지만 포맷이 변경되어 읽기 어려워졌습니다.원본으로 보는 것이 더 편합니다.

그는 이에 대해 언급하지 않았지만 디렉티브를 정의할 때 여러 디렉티브 간에 어떤 것을 공유할 필요가 있고 서비스를 원하지 않는 경우(서비스가 번거로운 경우)에는 데이터를 부모 디렉티브의 컨트롤러에 첨부합니다.

$scope는 많은 을 제공합니다.$watch가장 명백하지만 데이터를 뷰에 바인드하는 데만 필요한 경우 템플릿에서 플레인 컨트롤러와 '컨트롤러'를 사용하는 것이 좋습니다.

다음 게시물을 읽어보실 것을 추천합니다.각진JS: "컨트롤러 이름" 또는 "$scope"?

또한 "$scope"보다 변수를 노출하기 위해 "Controller as"를 사용할 경우의 이점에 대해 자세히 설명합니다.

변수가 아니라 구체적으로 방법에 대해 물어본 것은 알지만, 한 가지 방법을 고수하고 일관성을 유지하는 것이 좋다고 생각합니다.

그래서 제 의견으로는 포스트에서 설명한 변수 문제 때문에 "Controller as" 기술을 사용하여 메서드에 적용하는 것이 좋습니다.

이 과정(https://www.codeschool.com/courses/shaping-up-with-angular-js)에서는 "this"와 다른 많은 것들을 사용하는 방법에 대해 설명합니다.

"this" 메서드를 컨트롤러에 추가할 경우 뷰에서 컨트롤러 이름 "dot"을 사용하여 속성 또는 메서드를 호출해야 합니다.

예를 들어 뷰에서 컨트롤러를 사용하는 경우 다음과 같은 코드가 있을 수 있습니다.

    <div data-ng-controller="YourController as aliasOfYourController">

       Your first pane is {{aliasOfYourController.panes[0]}}

    </div>

이전 버전의 Angular(1.0 RC 이전)에서는 이를 $scope 메서드와 상호 교환하여 사용할 수 있었지만 현재는 그렇지 않습니다.스코프에 정의되어 있는 메서드 내에서는 this와 $scope를 서로 교환할 수 있지만(각도로는 $scope로 설정), 컨트롤러 컨스트럭터 내에서는 교환할 수 없습니다.

이 행동을 원래대로 되돌리기 위해(왜 바뀌었는지 아는 사람 있나요?)추가할 수 있습니다.

return angular.extend($scope, this);

(이 컨트롤러 함수에 $120이 삽입된 경우)

에 액세스 할 수 있는 오브젝트는 스코프에 할 수 .require: '^myParentDirective'

$190은 컨트롤러의 "this"와 다른 "this"를 가집니다.따라서 console.log(이)를 컨트롤러 내부에 넣으면 오브젝트(컨트롤러)가 표시되고, 이 컨트롤러 오브젝트에 addPane()이 addPane 메서드를 추가합니다.$scope (.methodName . methodName (.) methodName() scsc 。 this.methodName()오브젝트 합니다.controller는 methos를 추가합니다.$scope.functionName() 있고, HTML로 되어 있습니다.

$scope.functionName(){
    this.name="Name";
    //or
    $scope.myname="myname"//are same}

이 코드를 편집기에 붙여넣고 콘솔을 열어 다음을 확인하십시오.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>this $sope vs controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script>
        var app=angular.module("myApp",[]);
app.controller("ctrlExample",function($scope){
          console.log("ctrl 'this'",this);
          //this(object) of controller different then $scope
          $scope.firstName="Andy";
          $scope.lastName="Bot";
          this.nickName="ABot";
          this.controllerMethod=function(){

            console.log("controllerMethod ",this);
          }
          $scope.show=function(){
              console.log("$scope 'this",this);
              //this of $scope
              $scope.message="Welcome User";
          }

        });
</script>
</head>
<body ng-app="myApp" >
<div ng-controller="ctrlExample">
       Comming From $SCOPE :{{firstName}}
       <br><br>
       Comming from $SCOPE:{{lastName}}
       <br><br>
       Should Come From Controller:{{nickName}}
       <p>
            Blank nickName is because nickName is attached to 
           'this' of controller.
       </p>

       <br><br>
       <button ng-click="controllerMethod()">Controller Method</button>

       <br><br>
       <button ng-click="show()">Show</button>
       <p>{{message}}</p>

   </div>

</body>
</html>

언급URL : https://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers