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>
그러면 다음과 같이 됩니다.
- 해고당하다
viewData
정의되어 있는 범위에 관계없이 오브젝트 - 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
'programing' 카테고리의 다른 글
Next.js 페이지 전환 시 화면 로드 중 (0) | 2023.03.23 |
---|---|
리액트 + 플럭스 및 서버 측 렌더링(이형 반응 + 플럭스) (0) | 2023.03.23 |
봄 테스트용으로 메모리 데이터베이스에 특정 구성 (0) | 2023.03.18 |
리액트 기능 컴포넌트의 lodash debouncomponent (0) | 2023.03.18 |
React를 위한 부트스트랩과 머티리얼 UI의 비교 (0) | 2023.03.18 |