AngularJS에서 자식 컨트롤러에서 상위 컨트롤러로 변수의 값을 변경하는 방법은 무엇입니까?

이 코드에는 상위 컨트롤러와 하위 컨트롤러가 있습니다. HTML에서는 상위 컨트롤러가 하위 컨트롤러를 둘러 쌉니다. 상위 컨트롤러에서 하위 컨트롤러의 범위를 가져 오는 $ 컨트롤러 서비스를 사용하고 있습니다. 하위 컨트롤러의 $ scope.Child는 $ scope.Parent에 할당됩니다. 버튼을 클릭하면 $ scope.Child가 하위 컨트롤러의 "새 하위"값으로 변경됩니다.AngularJS에서 자식 컨트롤러에서 상위 컨트롤러로 변수의 값을 변경하는 방법은 무엇입니까?

부모 컨트롤러에서도 동일한 변경을 수행하려고합니다. 나는 이었고 $ scope.Parent는 $ scope.Child에 $ watch()를 두어 값을 "new child"로 가져 오는 것을 기대했다. 그러나 자식 컨트롤러의 $ scope.Child의 값의 변화가

그래서 $ scope.Parent에 반영되지 않는, 내 질문 내가 아이에 $ scope.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('parent', function($scope,$controller){ 
     var childScope = $controller('child',{$scope: $scope}); 
     $scope.Parent = $scope.Child; 
     $scope.$watch('Child',function(){ 
      $scope.Parent = $scope.Child; 
     },true); 
    }); 

    app.controller('child',function($scope){ 
     $scope.Child = "child"; 
     $scope.changeValue = function() { 
      $scope.Child = "new child"; 
     } 
    }); 
</script> 
<body ng-app="myApp"> 
<div ng-controller="parent"> 
    <p>this is parent: {{Parent}}</p> 
    <div ng-controller="child"> 
     <p>this is {{Child}}</p> 
     <button ng-click="changeValue()">Click!</button> 
    </div> 
</div> 
</body> 
</html>

출처

2017-09-08 rupali317

사용 $emit는 - 범위 계층 구조, A.E.을 통해 위쪽으로 경우 를 전달합니다 기본 단어로 - 하위 컨트롤러에서 상위 컨트롤러에 알립니다. 상위 제어기에서

$scope.changeValue = function() { $scope.Child = "new child"; $scope.$emit('onChildChange', {data: $scope.Child}); }

:

$scope.$on('onChildChange', function (event, result) { console.log(result.data) });

그것은 당신의 예에 대해

를 작동하는 방법 일부 Fiddle demo :

var childScope = $controller('child',{$scope: $scope}); $scope.Parent = $scope.Child; $scope.$watch('Child',function(){ $scope.Parent = $scope.Child; },true);

그것 좋지 않아 실제로는 자식 범위를로드 할 수 부모 제어 너. 예기치 않은 동작을 일으킬 수 있으며 이런 종류의 코드를 처리하기가 정말로 어렵습니다. 또한 깊은 시계 a.e. $scope.$watch({}, true)은 성능에 영향을 미칠 잔인한 행위입니다. 우리의 경우 $emit은 이벤트를 발생시키고이 이벤트를 듣는 사람은 그것을 잡습니다. 여기에 여분의 당직자 없음

출처

2017-09-08 06:18:12

AngularJS에서 자식 컨트롤러에서 상위 컨트롤러로 변수의 값을 변경하는 방법은 무엇입니까?

답변

관련 문제