AngularJS에서 부모 범위 변수 업데이트


113

두 개의 컨트롤러가 있으며 하나는 다른 컨트롤러에 포함되어 있습니다. 이제 자식 범위가 부모 범위에서 속성을 상속한다는 것을 알고 있지만 부모 범위 변수를 업데이트하는 방법이 있습니까? 지금까지 분명한 해결책을 찾지 못했습니다.

내 상황에서는 양식 내에 달력 컨트롤러가 있습니다. 양식이 제출 될 때 시작 및 종료 날짜를 갖도록 상위 범위 (양식)에서 시작 및 종료 날짜를 업데이트하고 싶습니다.


캘린더 컨트롤러가 지시문이어야하는 것처럼 들립니다.
Jonah

답변:


193

부모 범위에서 객체 (기본이 아님)를 사용해야하며, 그러면 자식 범위에서 직접 업데이트 할 수 있습니다.

부모의:

app.controller('ctrlParent',function($scope){
    $scope.parentprimitive = "someprimitive";
    $scope.parentobj = {};
    $scope.parentobj.parentproperty = "someproperty";
});

아이:

app.controller('ctrlChild',function($scope){
    $scope.parentprimitive = "this will NOT modify the parent"; //new child scope variable
    $scope.parentobj.parentproperty = "this WILL modify the parent";
});

작업 데모 : http://jsfiddle.net/sh0ber/xxNxj/

참조 범위의 뉘앙스는 AngularJS와의 프로토 타입 / 프로토 타입 상속 무엇입니까?


1
이것을 구현하려고 할 때이 오류가 발생합니다 : 'Undefined의'parentproperty '속성을 설정할 수 없습니다'.
Malcr001

코드를 게시 할 수 있습니까? 바이올린 데모에서 작동합니다. 달력 컨트롤이 격리 범위를 사용하는 경우 부모 범위에서 상속되지 않으므로 값을 지시문의 범위로 전달해야합니다.
Dan

이 질문을 잊어 버렸습니다. 나는 결국이 답변의 도움으로 작동하도록 관리했기 때문에 그것을 수락했습니다.
Malcr001 2013-06-13

ctrlParent div 요소에 {{parentobj.parentproperty}}를 넣는 것이 parentobj 개체를 선언하고이 개체를 ctrlParent 범위에있는 것으로 설정하는 것임을 이해합니다. 이것이 올바른 가정입니까?
Stephane

1
감사합니다. 작동합니다! 나는 이것에 대해 확실히 읽어야한다 (원형 상속과 원시). SO 링크보다 조금 더 설명하는 좋은 읽기를 추천 할 수 있습니까?
jvannistelrooy

116

이 작업을 수행하고 $scope.$parent변수를 사용하지 않는 한 가지 방법이 더 있습니다 .

부모 범위의 값을 변경하는 방법을 준비하고 자식 범위에서 사용하십시오. 이렇게 :

app.controller('ctrlParent',function($scope) {
  $scope.simpleValue = 'x';
  $scope.changeSimpleValue = function(newVal) {
    $scope.simpleValue = newVal;
  };
});

app.controller('ctrlChild',function($scope){
    $scope.changeSimpleValue('y');
});

또한 작동하며 값 변경을 더 잘 제어 할 수 있습니다.

그런 다음 HTML에서도 다음과 같이 메서드를 호출 할 수 있습니다 <a ng-click="changeSimpleValue('y')" href="#">click me!</a>.


1
좋은 해결책! 이것은 현재 $ scope에서 무언가를 찾을 수 없을 때 Angular가 $ parent를 조회하기 때문에 작동합니다. docs.angularjs.org/guide/scope ( '범위 계층'참조).
Elo

나는이 대답을 좋아하며 불필요한 개체를 만들 필요가 없습니다.
grimmdude

3
미래의 독자 :이 하이 파이브 댓글은 모두 약간 잘못된 것입니다. 모든 변수에 대해 두 개의 setter 함수 ( "불필요한 객체")를 생성하는 것은 어설프고 불필요한 상속 작업이며 Angular 방식이 아닙니다. Angular의 제작자 인 Misko Hevery는 "ng-model을 가질 때마다 어딘가에 점이 있어야합니다. 점이 없으면 잘못하고있는 것입니다."라고 강연합니다. Misko 비디오 @ 29:19
Dan

controllerAS 구문을 사용하여이 솔루션을 어떻게 적용 할 수 있습니까?
niran

6

이것은 또한 작동합니다 (그러나 이것이 모범 사례를 따르는 지 여부는 확실하지 않습니다)

app.controller('ctrlParent',function($scope) {
    $scope.simpleValue = 'x';
});

app.controller('ctrlChild',function($scope){
    $scope.$parent.simpleValue = 'y';
});

1
맞습니다. $ scope. $ parent.value를 사용하면 대부분의 경우 작동하지만 더 크고 복잡한 프로젝트에서 관리하기 어려울 수 있으므로 일반적으로 광범위하게 사용하는 것이 최선의 방법이 아닙니다.
Alex Johnson

4

기본 속성을 범위에 할당하면 상위 범위에 동일한 이름의 속성이 있더라도 항상 범위에 대해 로컬입니다 (즉석에서 생성 될 수 있음). 이것은 디자인 결정이며 좋은 IMHO입니다.

부모 범위에서 일부 기본 (ints, booleans, strings)을 변경해야하는 경우 뷰에서 해당 범위에있는 다른 개체의 속성이어야하므로 할당이 다음과 같이 읽을 수 있습니다.

<a ng-click="viewData.myAttr = 4">Click me!</a>

그리고 차례로 :

  1. 얻을 viewData정의 된 범위 객체를
  2. myAttr속성에 4를 할당하십시오 .

4

부모에서 선언 된 변수에 액세스하려면 자식 컨트롤러 또는 템플릿 파일에서 $ parent를 사용해야합니다.

컨트롤러에서

$scope.$parent.varaiable_name

HTML 템플릿에서

ng-model="$parent.varaiable_name"
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.