`this` 또는`$ scope`를 사용해야합니까?

251

컨트롤러 기능에 액세스하는 데 사용되는 두 가지 패턴이 있습니다 : this및 $scope.

어느 것을 언제 사용해야합니까? this컨트롤러에 설정되어 있고 $scope뷰의 범위 체인에있는 객체 라는 것을 알고 있습니다. 그러나 새로운 "Controller as Var"구문을 사용하면 쉽게 사용할 수 있습니다. 그래서 내가 묻는 것은 최선이며 미래의 방향은 무엇입니까?

예:

사용 this

function UserCtrl() {
  this.bye = function() { alert('....'); };
}

<body ng-controller='UserCtrl as uCtrl'>
  <button ng-click='uCtrl.bye()'>bye</button>

사용 $scope

function UserCtrl($scope) {
    $scope.bye = function () { alert('....'); };
}

<body ng-controller='UserCtrl'>
    <button ng-click='bye()'>bye</button>

나는 개인적 this.name으로 다른 자바 스크립트 OO 패턴에 비해 눈이 더 쉽고 자연 스럽습니다.

조언 부탁드립니다.

angularjs

— 센스 딥
소스

'이'2013 구글 I / O의 같은 새로운 것으로 보인다 사용 m.youtube.com/watch?v=HCR7i5F5L8c 또한,이 답변을 확인하십시오 stackoverflow.com/questions/11605917/...

— AlanW

"UserCtrl as uCtrl"구문이 새로운가요? 1.0.6 또는 1.1.4 ngController 페이지에 문서화되어 있지 않습니다.

— Mark Rajcok

이제 새로운 1.1.5 ngController 페이지 에 문서화되어 있습니다.

— Mark Rajcok

1

$ scope와이 codetunnel.io/angularjs-controller-as-or-scope의

— Sai

229

둘 다 용도가 있습니다. 첫째, 일부 역사 ...

$ scope는 "클래식"기술인 반면 "Controller as"는 훨씬 최신 버전입니다 (공식 버전 1.2.0부터는 이전에 불안정한 시험판에서 나타 났지만).

둘 다 완벽하게 작동하며 유일한 대답은 명시적인 이유없이 동일한 응용 프로그램에서 혼합하는 것입니다. 솔직히, 그것들을 혼합하면 효과가 있지만 혼란을 더할 것입니다. 하나를 골라서 굴리십시오. 가장 중요한 것은 일관성을 유지하는 것입니다.

어느 것? 그것은 당신에게 달려 있습니다. $ scope에는 더 많은 예제가 있지만 "controller as"도 증기를 발생시킵니다. 하나는 다른 것보다 낫습니까? 논쟁의 여지가 있습니다. 그래서 어떻게 선택합니까?

위로

"scope as"를 선호합니다. $ scope를 숨기고 중간 개체를 통해 컨트롤러에서 멤버를 뷰에 노출시키는 것을 좋아하기 때문입니다. 이것을 설정하면 * 컨트롤러에서 뷰에 노출하려는 것을 노출시킬 수 있습니다. $ scope로도 할 수 있습니다. 표준 JavaScript를 사용하는 것을 선호합니다. 실제로 다음과 같이 코딩합니다.

var vm = this;

vm.title = 'some title';
vm.saveData = function(){ ... } ;

return vm;

이것은 나에게 더 깨끗하다고 느끼고 뷰에 노출되는 것을 쉽게 볼 수 있습니다. viewmodel을 나타내는 "vm"을 반환하는 변수의 이름을 알 수 있습니다. 그건 내 컨벤션 일 뿐이야

$ scope를 사용하면 동일한 작업을 수행 할 수 있으므로이 기술을 추가하거나 방해하지 않습니다.

$scope.title = 'some title';
$scope.saveData = function() { ... };

그래서 당신에게 달려 있습니다.

주입

$ scope를 사용하면 $ scope를 컨트롤러에 주입해야합니다. 컨트롤러에서 시계를 피하려고하지만 $ broadcast 또는 시계와 같은 다른 이유로 필요하지 않은 한 컨트롤러 로이 작업을 수행 할 필요가 없습니다.

업데이트 나는 두 가지 선택에 대해이 게시물을 썼습니다 : http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

— 존 파파
소스

4

개인적으로 나는 또한 vm을 사용하는 귀하의 접근 방식을 따릅니다. 내가 선택한 유일한 코드 냄새는 이벤트 구독 또는 방송, 컨트롤러 내부의 양식 유효성 검사 변수에 액세스하는 등 $ scope와 특별히 상호 작용해야 할 때입니다. 이것은 여전히 $ scope를 주입 해야하는 다소 혼합 된 환경으로 이어집니다 컨트롤러를 기능으로 사용하더라도.

— Beyers

9

권리. 이 경우 $ scope는 여전히 사용되지만 더 많은 서비스로 사용됩니다. 각도 서비스 ($ scope, $ q 등)를 주입 할 때 필요한 기능을 제공합니다. $ scope를 사용하면 데이터 바인딩뿐만 아니라 메시지를보고 적용하고 사용할 수 있습니다. 그리고 컨트롤러를 사용할 때에도 $ scope가 그대로 사용됩니다

— John Papa

1

var vm = this;보기에서 'vm'이라고 불러야합니까? 'vm로 컨트롤러'. 그들은 같아야합니까?

— Javid

2

@JohnPapa-SideWaffle 템플릿이 "return vm;"이 아닌 이유 Controller As를 사용할 때?

— 케빈

2

@Kevin Controllers는 효과적으로 Ctor로 작동하므로 이미 "this"를 반환합니다.

— John Papa

68

$scopeAngular 2.0에서 제거되고 있습니다. 따라서 thisAngular 2.0의 출시 날짜가 가까워짐에 따라 다른 사람들이 따르기를 원하는 접근 방식이 사용 됩니다.

— 제이슨 328
소스

40

내 의견은 자바 스크립트에서 '이것'은 자체적으로 충분한 문제가 있으며 다른 의미 / 사용을 추가하는 것은 좋지 않다는 것입니다.

명확성을 위해 $ scope를 사용합니다.

최신 정보

여기 에 설명 된 '컨트롤러 이름'구문이 있습니다 . 나는 팬이 아니지만 지금은 좀 더 '공식적인'AngularJS 구성이므로주의를 기울여야합니다.

— 로이 트루 러브
소스

10

더 나은 것으로 생각하기 전에 먼저 새로운 "UserCtrl as uCtrl"구문을 이해해야한다고 생각합니다.

— Mark Rajcok

다시 'UserCtrl as uCtrl'을 다시 한 번 이해해야합니다. 여기에 나온 주장과 같은 이유로 대부분 나쁜 생각이라고 생각합니다. groups.google.com/forum/#!topic/angular/84selECbp1I

— Roy Truelove 2013

4

JS의 oop에 익숙하다면 완벽합니다. 컨트롤러는 클래스이며, 각도는 컨트롤러가 생성 될 때마다 새 연산자를 사용합니다. 당신은 그것을 싫어할 수 있지만 'this'를 사용하는 데 문제가 있다고 말하는 것은 잘못된 것입니다. 'this'의 사용 가능한 사례입니다.

— MJ

$ scope는 명확성을 높이 지 않습니다. 실제로 $ scope를 사용할 때 뷰에서 무슨 일이 일어나고 있는지 알기가 매우 어려울 수 있으며 중첩 범위가 있습니다. 이를 사용하여 구문으로서 컨트롤러는 훨씬 더 명확성을 추가합니다. 보기에서 메소드 또는 특성이 어느 컨트롤러의 범위에서 시작되는지는 명확하고 명확합니다.

— ddelrio1986

1

@ ddelrio1986에 동의합니다. 부트 스트랩 탭에 문제가 있었고 var vm = $ scope를 사용하면 어설프게 나타납니다. 탭에는 자체 범위가 있으므로 예상대로 이것을 사용할 수 없지만 var vm = this를 사용하면 상황이 예상대로 작동합니다.

— user441521

11

Todd Motto에 설명 된대로 컨트롤러를 더 쉽게 중첩 할 수 있으므로 Controller As가 더 낫습니다.

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

또한 항상 적어도 하나는 있어야합니다. 바인딩 식에서 프리미티브 권장 사항에 바인딩하지 마십시오 .

또한 2.0에서 사라지는 범위에서 분리 할 수 있습니다.

— 라이언 바이스
소스

7

Angular 설명서에는 사용 this을 권장합니다. 그것은 $scope제거되고 있다는 사실 외에도 내가 절대 사용하지 않을 충분한 이유입니다 $scope.

— 테페
소스

4

jason328의 "$ scope가 Angular 2.0에서 제거되고 있습니다"는 좋은 이유입니다. 그리고 선택하는 데 도움이되는 또 다른 이유를 찾았습니다. this더 읽기 쉽습니다fooCtrl.bar . HTML에서 볼 때 의 정의를 찾을 수있는 곳을 즉시 알고 bar있습니다.

업데이트 : this솔루션으로 전환 한 지 얼마되지 않아 $scope타이핑이 덜 필요한 방식 을 놓치기 시작했습니다.

— ZZY
소스

2

나는 조합을 선호합니다.

$ scope의 간단한 console.log와 일부 모의 데이터로 채운 후 'this'는 그 사실을 보여줍니다.

$ scope를 사용하면 컨트롤러의 커버 부분에 액세스 할 수 있습니다 (예 :

$$ChildScope: null;
$$childHead: null;
$$childTail: null;
$$listenerCount: Object;
$$listeners: Object;
$$nextSibling: Scope;
$$prevSibling: null;
$$watchers: null;
$$watcherCount: 0;
$id: 2;
$parent: Object;
foo: 'bar';

** $$가있는 속성과 메서드는 Angular 팀이 엉망으로 만드는 것이 좋지 않지만 $는 $ parent 및 $ id로 멋진 작업을 수행하는 데 안전한 게임이 될 수 있습니다.

'이것'은 2 방향 데이터와 기능을 첨부하여 지점으로 바로 연결됩니다. 첨부 한 내용 만 볼 수 있습니다.

foo: 'bar';

그렇다면 왜 조합을 선호합니까?

ui-router 중첩 앱에서 주 컨트롤러에 액세스하고 하위 컨트롤러 내에서 범용 값과 기능을 설정하고 호출 할 수 있습니다.

메인 컨트롤러에서 :

// Main Controller
var mainCtrl = this;
mainCtrl.foo = 'Parent at the bar';

자식 컨트롤러에서 :

// Child Controller
var mainCtrl = $scope.$parent.mainCtrl;
var childCtrl = this;

// update the parent from within the child
childCtrl.underageDrinking = function(){
    mainCtrl.foo = 'Child at the bar';
}

// And then attach the child back to a property on the parent controller!
mainCtrl.currentCtrl = childCtrl;

이제 자녀 내에서 부모님과 부모로부터 자녀에게 접근 할 수 있습니다!

— 크레이그 오 커티스
소스

1

둘 다 작동하지만 범위에 적합한 것을 $ scope에 적용하고 컨트롤러에 적합한 것을 컨트롤러에 적용하면 코드를 쉽게 유지할 수 있습니다. "어쩌면 스코프를 사용하는 사람들 에게이 컨트롤러를 구문으로 잊어 버립니다."

— 닉 매닝
소스