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) 있지만 그렇지 않으면 컨트롤러 생성자 내부.
어떻게 this및 $scopeAngularJS와 컨트롤러에서 사용할 수 있습니까?
답변
“어떻게
this및$scopeAngularJS와 컨트롤러에서 사용할 수 있습니까?”
짧은 답변 :
this- 컨트롤러 생성자 함수가 호출되면
this컨트롤러입니다. $scope객체 에 정의 된this함수가 호출 될 때 “함수가 호출 될 때 적용되는 범위”입니다. 이것은$scope함수가 정의 된 것일 수도 있습니다 . 따라서, 함수 내에서,this그리고$scope수 없는 동일합니다.
- 컨트롤러 생성자 함수가 호출되면
$scope- 모든 컨트롤러에는 관련
$scope개체가 있습니다. - 컨트롤러 (생성자) 기능은 모델 속성 및 관련 기능 / 동작을 설정합니다
$scope. - 이
$scope객체 에 정의 된 메소드 (및 프로토 타입 상속이 사용중인 경우 상위 범위 객체) 만 HTML / 뷰에서 액세스 할 수 있습니다. 예 :ng-click필터 등
- 모든 컨트롤러에는 관련
긴 대답 :
컨트롤러 함수는 JavaScript 생성자 함수입니다. 생성자 함수가 실행될 때 (예를 들어, 뷰가로드 될 때), this즉 “함수 컨텍스트”는 컨트롤러 객체로 설정된다. addPane 함수가 생성 될 때 “탭”컨트롤러 생성자 함수에서
this.addPane = function(pane) { ... }$ scope가 아닌 컨트롤러 객체에서 생성됩니다. 뷰는 addPane 함수를 볼 수 없습니다. $ scope에 정의 된 함수에만 액세스 할 수 있습니다. 즉, HTML에서는 작동하지 않습니다.
<a ng-click="addPane(newPane)">won't work</a>“탭”컨트롤러 생성자 함수가 실행되면 다음과 같은 결과가 나타납니다.
파선으로 표시된 검은 선은 프로토 타입 상속을 나타냅니다. 격리 범위는 프로토 타입으로 Scope 에서 상속됩니다 . (이 명령은 HTML에서 지시어가 발생한 범위에서 프로토 타입으로 상속되지 않습니다.)
이제 pane 지시문의 링크 함수는 tabs 지시문과 통신하려고합니다 (실제로 어떤 식 으로든 탭이 $ scope를 분리하는 데 영향을 주어야 함). 이벤트를 사용할 수 있지만 또 다른 메커니즘은 창 지시문 require에 탭 컨트롤러 를 두는 것 입니다. ( require$ scope 탭 에 대한 pane 지시문에 대한 메커니즘이없는 것 같습니다 .)
따라서 이것은 질문을 제기합니다 : 탭 컨트롤러에만 액세스 할 수 있다면 탭에 어떻게 액세스하여 $ scope를 분리합니까 (실제로 원하는 것입니까)?
빨간색 점선이 그 답입니다. addPane () 함수의 “scope”(여기서는 JavaScript의 함수 범위 / 클로저를 참조하고 있습니다)는 탭 격리 $ scope에 대한 액세스 권한을 제공합니다. 즉, addPane ()은 addPane ()이 정의 될 때 생성 된 클로저로 인해 위의 다이어그램에서 “탭 IsolateScope”에 액세스 할 수 있습니다. (대신에 $ 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)
}
첫 번째 링크를 클릭하면 그 표시됩니다 this및 $scope“이후, 동일 함수가 호출 유효한 범위 의”와 연관된 범위이다 ParentCtrl.
제 2 링크를 클릭하면 계시 this하고 $scope있는 없다 “때문에, 동일한 함수가 호출 유효한 범위 의”와 연관된 범위이다 ChildCtrl. 그래서 여기 this로 설정 ChildCtrl의 ‘ $scope. 메소드 안에는 $scope여전히 ParentCtrl$ 범위입니다.
thisng-repeat, ng-include, ng-switch 및 지시문이 모두 자체 자식 범위를 만들 수 있다는 점을 고려하여 $ scope에 정의 된 함수 내부를 사용하지 마십시오 .
답변
‘addPane’이 할당 된 이유는 <pane>지시문 때문입니다 .
pane지시자 않는 require: '^tabs'링크 기능으로, 부모 지시자로부터 탭 제어기 오브젝트를 두는.
addPane에 할당 this있도록 pane링크 기능이 그것을 볼 수 있습니다. 그런 다음 pane링크 함수 addPane에서 tabs컨트롤러 의 속성이며 tabsControllerObject.addPane입니다. 따라서 pane 지시문의 연결 기능은 탭 컨트롤러 객체에 액세스하여 addPane 메서드에 액세스 할 수 있습니다.
내 설명이 충분히 명확하길 바랍니다. 설명하기가 어렵습니다.
답변
방금 두 가지의 차이점에 대한 흥미로운 흥미로운 설명을 읽었으며 모델을 컨트롤러에 연결하고 컨트롤러의 별칭을 지정하여 모델을 뷰에 바인딩하는 선호도가 높아지고 있습니다. 기사는 http://toddmotto.com/digging-into-angulars-controller-as-syntax/ 입니다.
그는 언급하지 않지만 지시문을 정의 할 때 여러 지시문 사이에 무언가를 공유해야하고 서비스를 원하지 않는 경우 (서비스가 번거로운 합당한 경우가 있음) 부모 지시문의 컨트롤러에 데이터를 첨부하십시오.
이 $scope서비스는 $watch가장 유용한 유용한 기능을 많이 제공 하지만 데이터에 뷰를 바인딩해야하는 경우 템플릿의 일반 컨트롤러 및 ‘컨트롤러’를 사용하는 것이 좋습니다.
답변
다음 게시물을 읽는 것이 좋습니다 :
AngularJS : “Controller as”또는 “$ 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);컨트롤러 기능이 끝날 때 (이 컨트롤러 기능에 $ scope가 주입 된 경우).
이것은 자식 개체를 가질 수있는 컨트롤러 개체를 통해 부모 범위에 액세스 할 수있는 좋은 효과가 있습니다. require: '^myParentDirective'
답변
$ scope는 ‘this’와 컨트롤러 ‘this’가 다릅니다. 따라서 console.log (this)를 컨트롤러에 넣으면 객체 (controller)를 제공하고 this.addPane ()은 addPane 메서드를 컨트롤러 Object에 추가합니다. 그러나 $ scope의 범위는 다르며 해당 범위의 모든 메서드는 $ scope.methodName ()에 의해 액세스되어야합니다.
this.methodName()컨트롤러 내부는 컨트롤러 객체 내부에 메 토스를 추가하는 것을 의미합니다. $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>