Controller As 접근 방식을 사용하여 상속된 범위에 액세스
컨트롤러를 정의하는 원래 방법에서는 하위 범위가 원형적으로 상위 범위로부터 상속되기 때문에 상위 범위에 액세스하는 것이 상당히 간단했습니다.
app.controller("parentCtrl", function($scope){
$scope.name = "Parent";
})
.controller("childCtrl", function($scope){
$scope.childName = "child of " + $scope.name;
});
<div ng-controller="parentCtrl">
{{name}}
<div ng-controller="childCtrl">
{{childName}}
</div>
</div>
Controller-As 접근법은 컨트롤러를 선언하는 데 권장되는 방법인 것 같습니다.그러나 Controller-As에서는 위의 접근법이 더 이상 작동하지 않습니다.
네, 다음 명령어를 사용하여 부모 스코프에 액세스할 수 있습니다.pc.name보기:
<div ng-controller="parentCtrl as pc">
{{pc.name}}
<div ng-controller="childCtrl as cc">
{{cc.childName}}
</div>
</div>
이 문제(스파게티 코드 가능성)에 대해서는 몇 가지 문제가 있습니다만, 이 질문은 자녀 컨트롤러에서 부모 스코프에 액세스 하는 것에 관한 것입니다.
이 기능을 볼 수 있는 유일한 방법은 다음과 같습니다.
app.controller("parentCtrl", function(){
this.name = "parent";
})
.controller("childCtrl", function($scope){
$scope.pc.name = "child of " + $scope.name;
// or
$scope.$parent.pc.name = "child of " + $scope.name;
// there's no $scope.name
// and no $scope.$parent.name
});
자, 이제 자녀컨트롤러는 "에 대해 알아야 합니다.pc다만, (제 생각에는) 뷰에 한정되어야 합니다.아동 통제관은 어떤 뷰가 그 뷰를 선언하기로 결정했다는 사실을 알아야 한다고 생각하지 않는다.ng-controller="parentCtrl as pc".
Q: 그럼 어떤 접근법이 적절한가요?
편집:
설명:부모 컨트롤러를 상속할 생각은 없습니다.공유 범위를 상속/변경하려고 합니다.따라서 첫 번째 예를 수정하면 다음을 수행할 수 있습니다.
app.controller("parentCtrl", function($scope){
$scope.someObj = {prop: "not set"};
})
.controller("childCtrl", function($scope){
$scope.someObj.prop = "changed";
});
조사 결과, 다음과 같은 것을 깨달았습니다.
Controller-As 접근법은 사용법을 대체할 수 없습니다.
$scope둘 다 각자의 역할이 있기 때문에 함께 현명하게 사용할 수 있어야 합니다.
$scope이름이 나타내는 대로 동작합니다.즉, ViewModel 속성을 정의합니다.$scope이 방법은 네스트된 컨트롤러와 스코프를 공유할 때 가장 적합합니다.$scope자기들만의 논리를 추진하거나 바꾸려고 하는 거죠- Controller-As는 컨트롤러 오브젝트 전체를 (컨트롤러의 에일리어스를 통해) 지정된 범위를 가진 ViewModel로 정의합니다.이 방법은 View가 특정 컨트롤러 ViewModel을 참조할지 여부를 결정할 때 View에서만 가장 잘 작동합니다(다른 컨트롤러에서는 그렇지 않음).
다음은 예를 제시하겠습니다.
var app = angular.module('myApp', []);
// Then the controllers could choose whether they want to modify the inherited scope or not:
app.controller("ParentCtrl", function($scope) {
this.prop1 = {
v: "prop1 from ParentCtrl"
};
$scope.prop1 = {
v: "defined on the scope by ParentCtrl"
};
})
.controller("Child1Ctrl", function($scope) {})
.controller("Child2Ctrl", function($scope) {
// here, I don't know about the "pc" alias
this.myProp = $scope.prop1.v + ", and changed by Child2Ctrl";
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="ParentCtrl as pc">
<div ng-controller="Child1Ctrl">
<div>I know about the "pc" alias: {{pc.prop1.v}}</div>
</div>
<div ng-controller="Child2Ctrl as ch2">
<div>I only care about my own ViewModel: {{ch2.myProp}}</div>
</div>
</div>다음과 같이 해야 합니다.
html
<div ng-controller="ChildController as child">
<button type="button" ng-click="child.sayMe()">Say me!</button>
</div>
js
var app = angular.module('myApp', [])
app.controller('BaseController',function() {
this.me = 'Base';
this.sayMe= function() {
alert(this.me);
}
});
app.controller('ChildController', function($scope, $controller) {
var controller = $controller('BaseController as base', {$scope: $scope});
angular.extend(this, controller);
this.me = 'Child';
});
https://docs.angularjs.org/guide/controller 를 참조해 주세요.
상위 스코프에 단순히 프로그래밍 방식으로 액세스하려는 경우$scope서비스, 상위 범위 검색 및 상위 범위 이름에 액세스합니다.controllerAs예:
$scope.$parent.someName.doSomething();
언급URL : https://stackoverflow.com/questions/26647460/accessing-inherited-scope-with-controller-as-approach
'programing' 카테고리의 다른 글
| WooCommerce에서 프로그래밍 방식으로 가변 제품 및 두 가지 새로운 특성 생성 (0) | 2023.02.27 |
|---|---|
| material-ui 앱바를 material-ui-next와 함께 사용하여 오른쪽 또는 왼쪽으로 이동하는 올바른 방법은 무엇입니까? (0) | 2023.02.27 |
| 와의 JSON 파일 해석NET core 3.0/System.text.제이슨 (0) | 2023.02.22 |
| Angular에 ng-repeat 스코프가 있는 Directive Isolate 스코프JS (0) | 2023.02.22 |
| AngularJS: 디플링으로 $locationProvider.html5Mode를 활성화하는 방법 (0) | 2023.02.22 |