programing

Angular에서 상위 범위 변수 업데이트JS

instargram 2023. 3. 18. 08:17
반응형

Angular에서 상위 범위 변수 업데이트JS

두 개의 컨트롤러가 있는데 하나는 다른 컨트롤러 안에 감겨 있습니다.이제 하위 스코프가 상위 스코프에서 속성을 상속한다는 것을 알 수 있지만 상위 스코프 변수를 업데이트하는 방법이 있습니까?지금까지 나는 어떤 명백한 해결책도 발견하지 못했다.

제 상황에서는 양식 내에 캘린더 컨트롤러가 있습니다.폼이 제출되었을 때 시작일과 종료일이 되도록 부모 스코프(폼)에서 시작일과 종료일을 갱신하고 싶습니다.

상위 범위에서 개체(기본값이 아님)를 사용해야 합니다. 그러면 하위 범위에서 직접 업데이트할 수 있습니다.

부모:

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변수.

상위 범위에서 값을 변경하는 방법을 준비하여 하위 1에서 사용하십시오.다음과 같이 합니다.

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의 좋은 결정입니다.

뷰에서 부모 스코프의 일부 프리미티브(int, boulan, string)를 변경해야 하는 경우 해당 스코프의 다른 객체의 속성이 되어야 할당이 다음과 같이 됩니다.

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

그러면 다음과 같이 됩니다.

  1. 해고당하다viewData정의되어 있는 범위에 관계없이 오브젝트
  2. 4를 할당하다myAttr기여하다.

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

인컨트롤러

$scope.$parent.varaiable_name

html 템플릿 내

ng-model="$parent.varaiable_name"

언급URL : https://stackoverflow.com/questions/16928341/update-parent-scope-variable-in-angularjs

반응형