[angularjs] AngularJS-자식 범위에 대한 액세스

Program / 글쓴이

다음 컨트롤러가있는 경우 :

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무엇입니까? bin 을 정의 할 필요가 있다면, 그것이 관련이있는 것이 아닌 무언가를 설명하는 속성 parent이라고 가정하면 의미 론적으로 잘못 되지 않습니까?bchildparent

업데이트 : 어린이가 두 명 이상이 있다면, 그것에 대해 더 생각 b이에 대한 충돌 만들 것입니다 parent어떤에서 b검색 할 수 있습니다. 내 질문이 남아 있습니다. 올바른 액세스 방법 b은 parent무엇입니까?

답변

AngularJS의 스코프는 프로토 타입 상속을 사용합니다. 자식 스코프에서 속성을 찾을 때 인터프리터는 자식에서 시작하여 프로토 타입 체인을 찾고 그 반대가 아니라 속성을 찾을 때까지 부모로 계속합니다.

문제에 대한 Vojta의 의견 확인 https://groups.google.com/d/msg/angular/LDNz_TQQiNE/ygYrSvdI0A0J

간단히 말해서 : 부모 범위에서 자식 범위에 액세스 할 수 없습니다.

솔루션 :

  1. 부모에서 속성을 정의하고 자식에서 액세스합니다 (위 링크 참조).
  2. 서비스를 사용하여 상태 공유
  3. 이벤트를 통해 데이터를 전달합니다. $emit루트 범위까지 이벤트를 부모에게 위쪽으로 보내고 $broadcast아래쪽으로 이벤트를 전달합니다. 이것은 의미 상 올바른 것을 유지하는 데 도움이 될 수 있습니다.

답변

jm-의 대답이이 경우를 처리하는 가장 좋은 방법이지만 향후 참조를 위해 범위의 $$ childHead, $$ childTail, $$ 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
        });
     };

}])

중요 :
제대로 작동하려면 지시문을 사용 하고 html에서했던 것처럼 ng-controller각 컨트롤러의 이름을 바꿔야합니다 as.

팁 : 프로세스 중에
크롬 플러그인 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.variable을 부모 컨트롤러의 $ scope.assign에 할당하는 것입니다.

설명 : 두 개의 컨트롤러가 있습니다. html에서 부모 컨트롤러가 자식 컨트롤러를 포함하고 있음을 알 수 있습니다. 즉, 상위 컨트롤러가 하위 컨트롤러보다 먼저 실행됩니다. 따라서 먼저 setValue ()가 정의되고 컨트롤이 자식 컨트롤러로 이동합니다. $ scope.variable은 “하위”로 할당됩니다. 그런 다음이 자식 범위는 부모 컨트롤러의 기능에 인수로 전달됩니다. 여기서 $ scope.assign은 값을 “child”로 가져옵니다.

<!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>

답변