Angular 컨트롤 러 간 데이터 통신

angular 는 SPA 개발 에서 매우 강력 한 프레임 워 크 로 서 데이터 조작 은 큰 특징 이 고 모든 데 이 터 는 그들 만 의 해당 하 는 역할 영역 (즉, 자신의 컨트롤 러 내) 이 있 습 니 다. 그러면 컨트롤 러 간 의 데이터 상호작용 을 어떻게 실현 합 니까?요약 하면 다음 과 같은 몇 가지 가 있다.
컨트롤 러 간 은 부자 관계 - 계승 방식
        이러한 상호작용 방식 은 작용 역 의 계승 은 js 의 원형 계승 방식 을 바탕 으로 하기 때문에 두 가지 상황 으로 나 누 어야 한다. 작용 역 의 값 (즉, 당신 이 조작 해 야 하 는 데이터) 이 기본 유형 일 때 부급 작용 역 의 값 을 수정 하 는 동시에 부급 작용 역 에 영향 을 미 치지 만 부급 작용 역 의 값 을 수정 하면 부급 작용 역 을 바 꾸 지 않 는 다.또 다른 상황 은 작용 역 의 값 은 대상 입 니 다. 이렇게 하면 부모 급 작용 역 을 수정 하 든 하위 급 작용 역 을 수정 하 든 둘 다 변 합 니 다!구체 적 인 demo 는 나의 이전 글 을 볼 수 있다.
방송 메커니즘 에 기초 한 방식
        사실은 부자 의 계승 방식 을 이용 하여 angular 대부분의 데이터 상호작용 을 처리 할 수 있 습 니 다. 그러나 우리 가 형제 노드 에서 데이터 상호작용 을 해 야 한다 면 부자 의 계승 방식 은 그렇게 무력 해 집 니 다. 그러면 이 럴 때 우리 의 방송 체제 로 데이터 상호작용 을 해 야 합 니 다. 구체 적 으로 우 리 는 다음 demo 를 살 펴 보 겠 습 니 다.
        컨트롤 러 의 코드 를 먼저 보 세 요:

var routeApp = angular.module('routeApp', []);
    routeApp.controller('parentCtrl',['$scope',function($scope){
        $scope.parentname = "This is parent init name meichao";
        $scope.$on('firstChild', function(event,data){
            $scope.parentname = "This is firstChild change name";
            $scope.$broadcast('parent_to_secondCtrl', data);
        });
        $scope.$on('secondChild', function(event,data){
            $scope.parentname = "This is secondChild change name";
            $scope.$broadcast('parent_to_firstCtrl', data);
        });
    }]);
    routeApp.controller('firstChildCtrl',['$scope',function($scope){
        $scope.firstChidname = "This is firstChildCtrl init name";
        $scope.firstClick = function(){
            $scope.$emit('firstChild', $scope.firstChidname);
        }
        $scope.$on('parent_to_firstCtrl', function(event,data){
            $scope.firstChidname = data;
        });

    }]);
    routeApp.controller('secondChildCtrl',['$scope',function($scope){
        $scope.secondChidname = "This is secondChildCtrl init name";
        $scope.secondClick = function(){
            $scope.$emit('secondChild', $scope.secondChidname);
        }
        $scope.$on('parent_to_secondCtrl', function(event,data){
            $scope.secondChidname = data;
        });
    }]);

        우리 html 의 코드 를 다시 봅 시다:

<div ng-controller="parentCtrl">
        <div>{{parentname}}</div>
        <br>
        <div ng-controller="firstChildCtrl">
            <div>   firstChildCtrl          ：{{firstChidname}}</div>
            <br>
            <input type="text" ng-model="firstChidname">
            <div class="btn" ng-click="firstClick()">  first</div>
        </div>
        <div ng-controller="secondChildCtrl">
            <div>   secondChildCtrl          ：{{secondChidname}}</div>
            <br>
            <input type="text" ng-model="secondChidname">
            <div class="btn" ng-click="secondClick()">  second</div>
        </div>
    </div>

        우 리 는 모두 3 개의 컨트롤 러, 1 개의 부모 급, 2 개의 키 급 (하위 컨트롤 러 는 서로 형제) 을 썼 습 니 다. 방송 체 제 를 이용 하여 firstChildCtrl 컨트롤 러 와 secondChildCtrl 컨트롤 러 간 의 데이터 교 류 를 실현 합 니 다. 각 컨트롤 러 에는 $emit 작업 (부모 급 전송 데이터) 을 촉발 하 는 함수 가 있 습 니 다. 그리고 parentCtrl 컨트롤 러 에서 $on 으로 데 이 터 를 받 습 니 다.더 나 아가 다른 키 컨트롤 러 처럼 $broadcast 방송 을 하여 다른 컨트롤 러 의 데 이 터 를 바 꾸 어 형제 컨트롤 러 간 의 데이터 상호작용 을 실현 합 니 다.
        구체 적 인 효 과 는 스스로 테스트 용례 를 쓸 수 있다.
명령 중의 컨트롤 러 와 부모 컨트롤 러 간 의 상호작용
        우리 가 스스로 명령 을 쓸 때 도 부모 컨트롤 러 와 데이터 상호작용 을 하여 demo 를 볼 수 있 습 니 다.

<div ng-controller="parentCtrl">
        <div>{{parentname}}</div>
        <test/>
    </div>
    <script src="//cdn.bootcss.com/angular.js/1.3.9/angular.min.js"></script>
    <script>
        var routeApp = angular.module('routeApp', []);
        routeApp.controller('parentCtrl',['$scope',function($scope){
            $scope.parentname = "             ";
        }]);
        routeApp.directive('test', function(){
            return {
                scope:true,
                template: '<div><div>{{parentname}}</div><input type="text" ng-model="parentname" /></div>',
                link: function($scope, iElm, iAttrs, controller) {
                    
                }
            };
        });
    </script>

        명령 에 있 는 scope 는 기본적으로 false 입 니 다. 그러면 우리 가 만 든 명령 은 부모 역할 도 메 인의 모든 속성 과 방법 을 계승 하고 격 리 되 지 않 습 니 다. 입력 상자 에 새로운 내용 을 입력 할 때 명령 에 있 는 parentname 과 부모 역할 도 메 인의 parentname 이 변 경 됩 니 다. scope 를 true 로 설정 할 때,부모 역할 도 메 인 을 계승 하고 격 리 합 니 다. 즉, 컨트롤 러 에서 데이터 수정 을 하면 컨트롤 러 의 parent name 에 만 영향 을 주 고 부모 역할 도 메 인 에 있 는 parent name 에 영향 을 주지 않 습 니 다. scope 를 독립 적 인 역할 도 메 인 으로 설정 하여 격 리 하고 계승 하지 않 을 수도 있 습 니 다. 독립 적 인 역할 도 메 인 으로 설정 한 demo 를 보십시오.

<div ng-controller="parentCtrl">
        <div>{{parentname}}</div>
        <div test parentname="parentname"></div>
    </div>
    <script src="//cdn.bootcss.com/angular.js/1.3.9/angular.min.js"></script>
    <script>
        var routeApp = angular.module('routeApp', []);
        routeApp.controller('parentCtrl',['$scope',function($scope){
            $scope.parentname = "             ";
        }]);
        routeApp.directive('test', function(){
            return {
                scope:{
                    parentname:'='
                },
                template: '<div><div>{{parentname}}</div><input type="text" ng-model="parentname" /></div>',
                link: function($scope, iElm, iAttrs, controller) {
                    
                }
            };
        });
    </script>

        쓰기 에 변화 가 있 음 을 알 수 있 습 니 다. scope: {parentname: '='} 사용 = 데이터 의 양 방향 바 인 딩 을 실현 합 니 다. 즉, 명령 의 입력 상자 에 내용 을 입력 하면 명령 의 parentname 뿐만 아니 라 부모 역할 도 메 인 에 있 는 parentname 도 바 뀔 수 있 습 니 다.물론 데이터 의 양 방향 연결 도 있 고 데이터 의 단일 항목 연결 도 있 을 것 입 니 다. demo 를 보십시오.

<div ng-controller="parentCtrl">
        <div>{{parentname}}</div>
        <div test parentname="{{parentname}}"></div>
    </div>
    <script src="//cdn.bootcss.com/angular.js/1.3.9/angular.min.js"></script>
    <script>
        var routeApp = angular.module('routeApp', []);
        routeApp.controller('parentCtrl',['$scope',function($scope){
            $scope.parentname = "             ";
        }]);
        routeApp.directive('test', function(){
            return {
                scope:{
                    parentname:'@'
                },
                template: '<div><div>{{parentname}}</div><input type="text" ng-model="parentname" /></div>',
                link: function($scope, iElm, iAttrs, controller) {
                    
                }
            };
        });
    </script>

        이렇게 되면 입력 상자 에 내용 을 입력 하면 컨트롤 러 의 parentname 만 바 꾸 고 부모 역할 영역 에 있 는 parentname 은 바 꾸 지 않 습 니 다.
angular 서 비 스 는 컨트롤 러 간 데이터 상호작용 을 실현 합 니 다.
        ng 에서 서 비 스 는 하나의 사례 이기 때문에 서비스 에서 대상 을 생 성 해 야 합 니 다. 이 대상 은 주입 에 의존 하 는 방식 으로 데 이 터 를 모든 컨트롤 러 에서 공유 할 수 있 습 니 다. 다음은 demo 를 보십시오.

<div ng-controller="brotherCtrl_first">
        <input type="text" ng-model="test"/>
        <div class="btn" ng-click="change()">click me</div>
    </div>
    <div ng-controller="brotherCtrl_second">
        <div class="btn" ng-click="add()">my name {{name}}</div>
    </div>
    <script src="//cdn.bootcss.com/angular.js/1.3.9/angular.min.js"></script>
    <script>
    var routeApp = angular.module('routeApp', []);
    routeApp.factory('instance',function(){
        return {
            name:''
        }
    });
    routeApp.controller('brotherCtrl_first',['$scope','instance',function($scope, instance) {
        $scope.change = function(){
           instance.name = $scope.test;
       };
    }]);
    routeApp.controller('brotherCtrl_second', ['$scope','instance',function($scope, instance) {
        $scope.add = function() {
            $scope.name = instance.name;
        };
    }]);
    </script>

        brotherCtrlfirst 컨트롤 러 의 입력 상자 에 내용 을 입력 하고 click me 단 추 를 누 르 면 이 때 입력 상자 의 내용 을 서비스 에 저장 한 다음 brotherCtrlsecond 컨트롤 러 에서 단 추 를 누 르 면 서비스 에서 데 이 터 를 꺼 내 name 에 전달 하여 데이터 의 상호작용 을 실현 합 니 다.
        angular 에서 의 데이터 상호작용 방식 은 대부분 이 몇 가지 이 므 로 좋 지 않 은 말 이 있 으 면 가르쳐 주 십시오.