AngularJS - 하위 범위에 대한 액세스
다음 컨트롤러가 있는 경우:
function parent($scope, service) {
$scope.a = 'foo';
$scope.save = function() {
service.save({
a: $scope.a,
b: $scope.b
});
}
}
function child($scope) {
$scope.b = 'bar';
}
어떻게 하는 게 좋을까?parent읽어주세요b밖으로child정의할 필요가 있는 경우b에parent라고 가정하면, 그것은 의미론적으로 부정확하지 않을까?b에 관련된 무언가를 설명하는 속성입니다.child가 아니라parent?
업데이트: 한 명 이상의 자녀가 있는 경우 더 자세히 고려합니다.b그것은 갈등의 원인이 될 것이다parent어느 쪽인가b취득할 수 있습니다.여전히 의문이 남는다. 어떻게 하면 이 컴퓨터에 접속할 수 있을까?b부터parent?
AngulargularJS는 프로토타입 상속을 사용합니다. 하위 범위에서 부동산을 조회할 때 통역자가 자식부터 시작하여 부동산을 찾을 때까지 프로토타입 체인을 조회하고 부모에게 계속합니다.
이 문제에 대한 Vojta의 코멘트를 확인합니다.https://groups.google.com/d/msg/angular/LDNz_TQQiNE/ygYrSvdI0A0J
요약하면: 상위 범위에서 하위 범위에 액세스할 수 없습니다.
솔루션:
- 부모에서 속성을 정의하고 자녀로부터 액세스합니다(위 링크 참조).
- 서비스를 사용하여 상태 공유
- 이벤트를 통해 데이터를 전달합니다.
$emit루트 범위까지 부모에게 이벤트를 전송하고$broadcast는 이벤트를 아래쪽으로 디스패치합니다.이것은 의미론적으로 올바른 상태를 유지하는 데 도움이 될 수 있습니다.
jm-의 답변이 이 문제를 처리하는 가장 좋은 방법이지만 향후 참조를 위해 스코프의 $$child를 사용하여 하위 스코프에 액세스할 수 있습니다.헤드, $$child테일, $$nextSibling 및 $$prevSibling 멤버.이러한 정보는 문서화되어 있지 않기 때문에 예고 없이 변경될 수 있습니다.그러나, 스코프를 통과할 필요가 있는 경우는, 여기에 기재되어 있습니다.
// get $$childHead first and then iterate that scope's $$nextSiblings
for(var cs = scope.$$childHead; cs; cs = cs.$$nextSibling) {
// cs is child scope
}
다음과 같이 시험해 보십시오.
$scope.child = {} //declare it in parent controller (scope)
그 후 하위 컨트롤러(하드웨어)에서 다음을 추가합니다.
var parentScope = $scope.$parent;
parentScope.child = $scope;
이제 부모가 자녀의 범위에 액세스할 수 있습니다.
생각할 수 있는 회피책 중 하나는 init 기능을 사용하여 부모 컨트롤러에 자녀 컨트롤러를 주입하는 것입니다.
가능한 구현:
<div ng-controller="ParentController as parentCtrl">
...
<div ng-controller="ChildController as childCtrl"
ng-init="ChildCtrl.init()">
...
</div>
</div>
어디서?ChildController다음 항목이 있습니다.
app.controller('ChildController',
['$scope', '$rootScope', function ($scope, $rootScope) {
this.init = function() {
$scope.parentCtrl.childCtrl = $scope.childCtrl;
$scope.childCtrl.test = 'aaaa';
};
}])
그럼 이제...ParentController다음을 사용할 수 있습니다.
app.controller('ParentController',
['$scope', '$rootScope', 'service', function ($scope, $rootScope, service) {
this.save = function() {
service.save({
a: $scope.parentCtrl.ChildCtrl.test
});
};
}])
중요:
제대로 작동하려면 지침을 사용해야 합니다.ng-controller를 사용하여 각 컨트롤러의 이름을 변경합니다.as예를 들어 html에서 했던 것처럼.
힌트:
프로세스 중에 크롬 플러그인 ng-inspector를 사용합니다.나무를 이해하는 데 도움이 될 거예요.
$emit 및 $broadcast 사용(위 코멘트에서 walv에서 언급)
이벤트를 위쪽으로(자녀에서 부모로) 실행하려면
$scope.$emit('myTestEvent', 'Data to send');
이벤트를 아래쪽으로(부모에서 자녀로) 실행하려면
$scope.$broadcast('myTestEvent', {
someProp: 'Sending you some data'
});
그리고 마지막으로 듣기 위해서
$scope.$on('myTestEvent', function (event, data) {
console.log(data);
});
상세한 것에 대하여는, https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/ 를 참조해 주세요.
즐기세요 :)
예, 자녀 컨트롤러의 변수를 부모 컨트롤러의 변수에 할당할 수 있습니다.다음 방법 중 하나를 생각할 수단은 다음과 같습니다.
개요:다음 코드의 주요 목적은 부모 컨트롤러의 $scope.assign에 자녀 컨트롤러의 $scope.variable을 할당하는 것입니다.
설명:2개의 컨트롤러가 있습니다.html에서는 부모 컨트롤러가 자녀 컨트롤러를 둘러싸는 것에 주의해 주십시오.즉, 부모 컨트롤러가 자녀 컨트롤러보다 먼저 실행됩니다.따라서 먼저 setValue()가 정의되고 다음으로 제어가 하위 컨트롤러로 이동합니다.$180.120이 "자녀"로 할당됩니다.다음으로 이 자 스코프가 부모 컨트롤러의 함수에 인수로 전달됩니다.여기서 $scope.assign은 값을 "자"로 가져옵니다.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('child',function($scope){
$scope.variable = "child";
$scope.$parent.setValue($scope);
});
app.controller('parent',function($scope){
$scope.setValue = function(childscope) {
$scope.assign = childscope.variable;
}
});
</script>
<body ng-app="myApp">
<div ng-controller="parent">
<p>this is parent: {{assign}}</p>
<div ng-controller="child">
<p>this is {{variable}}</p>
</div>
</div>
</body>
</html>
언급URL : https://stackoverflow.com/questions/13428042/angularjs-access-to-child-scope
'programing' 카테고리의 다른 글
| github에서 풀 요청을 취소하려면 어떻게 해야 합니까? (0) | 2023.07.09 |
|---|---|
| Oracle ALTER 문에 하위 쿼리를 사용할 수 있습니까? (0) | 2023.07.09 |
| Angularjs pubsub vs $broadcast (0) | 2023.04.01 |
| Ionic / AngularJs 앱에 노드 모듈을 포함 및 사용하는 방법 (0) | 2023.04.01 |
| AngularJS app.run() 문서? (0) | 2023.04.01 |