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

Program / 글쓴이

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

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

답변

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

부모의:

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와의 프로토 타입 / 프로토 타입 상속 무엇입니까?

답변

이 작업을 수행하고 $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>.

답변

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

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

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

답변

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

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

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

그리고 차례로 :

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

답변

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

컨트롤러에서

$scope.$parent.varaiable_name

HTML 템플릿에서

ng-model="$parent.varaiable_name"

답변