두 컨트롤러 간의 $ scope 업데이트

Question

설명하기가 어렵지만 시도해 볼 것입니다.

저는 angularJS 앱을 만들고 있는데 UI를 업데이트하는 데 문제가 있습니다 ($ scope). 여기

페이지의 레이아웃은 2 컨트롤러와 동시에 3 개의 다른 $ 범위가 볼 수 있습니다. 예를 들어, $ scope3에서 "Title"을 편집하면 $ scope2에서도 "Title"이 변경되어야합니다.

변경 사항을 모니터링하고 컨트롤러간에 값을 전송하고이를 $ scope.value로 전달하거나 강제로 새 $ 리소스 호출을 전달하는 가장 좋은 방법은 무엇입니까?

나는 완전히 여기에서 길을 잃는다.

Answer 1

여러 가지 방법이 있습니다. 범위가 다른 템플릿 또는 모듈에있는 경우 범위 간의 관계에 따라 최상을 선택해야합니다.

첫 번째 방법은 필요한 값을 저장할 수있는 조정자 서비스를 만드는 것입니다. 이 중재자 서비스는 컨트롤러, 기타 서비스, 지시문이 필요한 곳이면 어디에서나 주입 할 수 있습니다. 모듈의 모듈에서 모듈의 모듈

템플릿 1

<div ng-controller="Ctrl1"> 
    <input type="text" ng-model="val">{{ val }} 
</div> 

컨트롤러 1

app.controller('Ctrl1', ['$scope', 'ValMediator', function($scope, ValMediator) { 
$scope.val = ''; 

$scope.$watch(
    function(){ 
    return ValMediator.getVal(); 
    }, 
    function(newVal){ 
    $scope.val = newVal; 
    } 
); 

$scope.$watch('val', 
    function(newVal){ 
    ValMediator.setVal(newVal); 
    } 
); 

}]); 

템플릿 2

<div ng-controller="Ctrl2"> 
    <input type="text" ng-model="val">{{ val }} 
</div> 

컨트롤러 2

app.controller('Ctrl2', ['$scope', 'ValMediator',function($scope, ValMediator) { 
    $scope.val = ''; 

    $scope.$watch(
    function(){ 
     return ValMediator.getVal(); 
    }, 
    function(newVal){ 
     $scope.val = newVal; 
    } 
); 

    $scope.$watch('val', 
    function(newVal){ 
     ValMediator.setVal(newVal); 
    } 
); 

}]); 

중재자 서비스

app.factory('ValMediator', function() { 
    var val = ''; 
    return { 
    setVal: function(newVal){ 
     val = newVal; 
    }, 
    getVal: function(){ 
     return val; 
    } 
    }; 
}); 

이 first jsBin exampleValMediator 참조하여주십시오 val 내부 변수를 저장하고 공중 인터페이스 게터와 세터를 노출 이런 서비스의 예이다. 다른 컨트롤러는 그것을 주입하여 사용할 수 있습니다. 서비스 게터에서 $scope.$watch을 사용하면 모든 외부 변경 사항이 로컬 $scope에 저장됩니다. 로컬 val을 시청하는 것은 중재자 서비스를 통해 다른 소비자에게 지역 변경 사항을 게시하는 데 사용됩니다.

=====================는

그것은 또 다른 방법은 $rootScope를 통해 이벤트를 방출하는 것입니다. 나는이 방법이 반드시 필요하지 않은 이벤트로 rootScope을 처리하기 때문에 사용해야한다고 생각하지 않는다. 그러나 이는 교차 모듈/범위 통신의 유효한 방법이므로 고려해야합니다.

여기 second jsBin example

중재자의 역할이 단지 이벤트 수송을위한 매체로 사용되는 $rootScope 서비스에 의해 촬영을 참조하십시오.템플릿은 동일하지만, 컨트롤러는 통신을 위해 아무것도 다음 $scope 및 $rootScope 필요하지 않습니다

컨트롤러 1 개 모듈 1

app.controller('Ctrl1', ['$scope', '$rootScope', function($scope, $rootScope) { 
    $scope.val = ''; 

    $scope.$on('Val/update', function(e, arg){ 
    console.log('val update 1', arg); 
    $scope.val = arg; 
    }); 

    $scope.$watch('val', 
    function(newVal, oldVal){ 
     if (newVal === oldVal) return; 
     $rootScope.$broadcast('Val/update', newVal); 
    } 
); 

}]); 

컨트롤러 2 모듈을 2

두 번째 그것을이다

app.controller('Ctrl2', ['$scope', '$rootScope',function($scope, $rootScope) { 
    $scope.val = ''; 

    $scope.$on('Val/update', function(e, arg) { 
    console.log('val update 2', arg); 
    $scope.val = arg; 
    }); 

    $scope.$watch('val', 
    function(newVal, oldVal) { 
     if (newVal === oldVal) return; 
     $rootScope.$broadcast('Val/update', newVal); 
    } 
); 

}]); 

예 - 변경 이벤트에 반응하고 자신의 업데이트를 게시하십시오.