컨트롤러의 범위 변수 초기화

저는 AngularJS에 완전히 익숙하며 과정을 따라이 프레임 워크를 "배우기 시작했습니다". 나는이 페이지의 상단에있는이 개 스크린 캐스트를 보았다 :컨트롤러의 범위 변수 초기화

https://github.com/curran/screencasts/tree/gh-pages/introToAngular

을 모두 스크린 캐스트를보고 내가 어떤 컨트롤러와 함께 작동하도록 시도 내 자신의 간단한 각도 응용 프로그램을 만들려고 예제의 일부를 조사 후.

Index.html을 나는 AI가 didn를 알아 냈어 컨트롤러 범위에 VARA을 결합하는 시도 후

<html ng-app="WIMT"> 
<head> 
    <title>trying out angularJS</title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script type="text/javascript" src="../bower_components/angular/angular.min.js"></script> 
    <script type="text/javascript" src="../JS/app.js"></script> 

</head> 
<body> 

<div ng-controller="controllerA as a"> 
    {{a.varA}} 
</div> 

<div ng-controller="controllerB as b"> 
    {{b.varB}} 
</div> 

<div ng-controller="controllerC as c"> 
    {{c.varC}} 
</div> 

</body> 
</html>

(function() { 

var app = angular.module('WIMT',[]); 


app.controller('controllerA',function($scope,$http){ 
    $scope.varA = "A"; 
}); 

app.controller('controllerB',['$scope',function($scope) { 
    $scope.varB = "B"; 
} 
]); 

app.controller('controllerC',function($scope, $http) { 
    var reg = this; 

    reg.varC = "C"; 
}); 

})();

: 이제 다음 코드가 일하지 않고 인터넷에서 해결책을 찾았습니다. 나는 몇 가지 다른 방법 (B & C)을 발견했다. C 옵션 만 작동하고 html을 실행할 때 C가 표시됩니다. 두 A & B는 아무것도 표시하지 않습니다.

이 예제에서 옵션 A와 B가 작동하지 않는 이유는 무엇입니까?

출처

2016-06-01 Niek Jonkman

Btw를 사용하면 자체 실행 익명 기능으로 각도 앱을 둘러 쌀 필요가 없습니다. – Kyle

controllerAs 구문을 사용하고 있기 때문에 세 번째 구문이 작동하고 처음 두 개 구문이 작동하지 않는 이유입니다. 인쇄하기 a.varA 및 b.varB을 원하는 경우에

<div ng-controller="controllerA as a"> 
    {{a.varA}} 
</div> 

<div ng-controller="controllerB as b"> 
    {{b.varB}} 
</div> 

<div ng-controller="controllerC as c"> 
    {{c.varC}} 
</div>

, 아래로 변경해야합니다 :

app.controller('controllerA',function($scope,$http){ 
    $scope.varA = "A"; 
});

<div ng-app="app"> 
    <div ng-controller="controllerA as a"> 
    {{varA}} 
    </div> 

    <div ng-controller="controllerB as b"> 
     {{varB}} 
    </div> 

    <div ng-controller="controllerC as c"> 
     {{c.varC}} 
    </div> 
</div>

http://jsfiddle.net/t0hhp5wz/

출처

2016-06-01 12:43:54 Thalaivar

귀하의 반응에 감사드립니다. 귀하의 솔루션은 효과가 있습니다. 그러나 이것은 질문을 남겨 둡니다. 왜 내가 컨트롤러 A를 a .varA를 사용하지 않고 varA를 사용하는 것처럼 사용합니까? –

당신은 사용하지 말아야합니다. 나는 어떻게 print하는 지에 대한 예제를주었습니다 ... $ scope를 사용하는 것보다 controllerAs 구문을 사용하는 것이 가장 좋습니다. – Thalaivar

이 꽤 같은 일이다 이 구문은 축소를 사용하는 경우 작동합니다. 티.

app.controller('controllerB',['$scope',function($scope) { 
    $scope.varB = "B"; 
} 
]);

사용 뷰에서이 구문 : 당신이 controller as 별칭 옵션 A 참조 & B를 사용하고 있기 때문에

<div ng-controller="controllerA"> 
    {{varA}} 
</div>

출처

2016-06-01 12:45:32 AlainIb

일반적으로 controllerAs 구문을 사용하는 것이 가장 좋습니다. 이건 아니야. –

는 $scope의 childScopes있는 컨트롤러 범위 내에서 배치됩니다.

$scope$scope의 경우 컨트롤러 범위 내에서 A & B가 생성되고 해당 컨트롤러의 부모 범위 인 $scope에서는 생성되지 않습니다.

출처

2016-06-01 12:51:22

'$ scope'은 컨트롤러의 범위입니다. 'controller as '는 ** 컨트롤러를 ** 속성으로 범위에 추가합니다. – zeroflagL

컨트롤러의 범위 ...? 나는 지시어 접근법을 사용할 때 컨트롤러에 특정한 범위가 만들어 질 것이라고 생각했다. 이 점을 명확히 해주십시오. –

'ng-controller'는 컨트롤러에서'$ scope'로 접근 할 수있는 범위를 만듭니다. 'controller as vm'은 컨트롤러 인스턴스를 속성'vm'으로 범위에 추가합니다. 컨트롤러 내에서 'this'는'$ scope.vm'과 같습니다. 그래서'this.a'는'$ scope.vm.a'와 같을 것이고, {{vm.a}}'는 템플릿과 같습니다. 그러나 귀하의 대답에서 알 수 있듯이 두 가지가 아닌 하나의 범위 만 있습니다. 명확한 설명을 주신 덕분에 – zeroflagL

컨트롤러의 범위 변수 초기화

답변

관련 문제