제2의 비엔지니어 인생관을 꿈꾸며

Posted
Filed under jQuery
# 이벤트 호출로 $scope 간의 데이터 전달관련 포스팅을 추가로 해봤다.
지난 #1편 의 포스팅은 단순히 메소드의 사용법에 대해 알아봤다면, 이번에는 각 스코프 간의 연결을 을 통해 모든관계를 정확히 이해하고 가자.
 부모 - 자식 ,  자식 - 자식 ,  부모 - 자식의 자식  ,  자식 - 자식의자식  관례를 이해할 수 있다.

(부모 - 자식 관계는, 사실 자식 - 자식의 자식의 관계와 같다 자식의 자식의 부모는 자식 이므로 .. @.@ 예제를 보자)

<!DOCTYPE html>
<html>
<head>
    <!-- https://cdnjs.com/libraries/angular.js/ -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-cookies.min.js"></script>    
</head>    
<body ng-app="myApp">

          <div ng-controller="NParent">

                   <div> 부모 #0 : <span ng-bind="name"></span>
                    <div ng-bind="parentname"></div>
                    <button ng-click="fnSetValue()">값 설정</button>
                    </div>

                     <div ng-controller="NChild1">
                        자식 #1 : <span ng-bind="name"></span>
                                  / 자식 #1 에 자식 #0 :
                                  <span ng-controller="NChild11">
                                        <span ng-bind="name"></span>
                                         <!--  NChild11 에는 fnWhoami() 함수가 없어 부모인 NChild1 로 찾아가서 호출한다.
                                                만약 NChild1 에도 없으면  최상위 부모인 NParent 를 찾아간다 -->
                                        <button ng-click="fnWhoami()">나는 누구?</button>
                                  </span>
                     </div>
                     <div ng-controller="NChild2">
                          자식 #2 : <span ng-bind="name"></span>          
                          <button ng-click="fnNC2SetValue()">내 이름 {{name}} 으로 모든 값 설정</button>
                     </div>
          
        </div>
  
        <script type="text/javascript">
                var m = angular.module("myApp" , []);    

               // DOM 구조상 부모 $scope 
                m.controller("NParent" , function($scope)
                {        
                    // 자식의 모든 name 변수에 영향을 받음
                    $scope.name = "pluginn"; 

                    // 자식의 모든 
parentname 변수에 영향을 받으나, 본인만 있으므로 본인만 받음
                    $scope.parentname = "pluginn parent"; 
                    $scope.fnSetValue = function()
                    {     
                       // 자식 $scope 의 setValue $on 이벤트 함수 호출               
                        $scope.$broadcast("setValue" , "");
                    }

                    // 자식 $scope 로 부터 호출 당해질 이벤트 함수 등록
                    $scope.$on("brSetValue" , function(e,d)
                   {
                       // 자식 $scope에 $on 으로 등록된 setValue 이벤트 함수 모두 콜
                       $scope.$broadcast("setValue" , d);
                    });
                });
                
                m.controller("NChild1" , function($scope)
                {
                   //  부모로부터  불려질 이벤트 함수 setValue 등록
                  $scope.$on("setValue" , function(e , d)
                  {
                        if (d == "") d = " ++  자식1_이름 SET ++ ";
                        $scope.name = d;                        
                  });

                  $scope.fnWhoami = function()
                  {
                           alert("NChild1");
                   }
                });
                m.controller("NChild11" , function($scope)
                {
                    //  부모로부터  불려질 이벤트 함수 setValue 등록
                    $scope.$on("setValue" , function(e,d)
                    {
                        if (d == "") d = " ++ 자식1의 자식1이름 SET ++";
                        $scope.name = d;                      
                    });
                });
                
                m.controller("NChild2" , function($scope)
                {
                    //  부모로부터  불려질 이벤트 함수 setValue 등록
                   $scope.$on("setValue" , function (e ,d)
                   {
                      
                        if (d == "") d = " ++ 자식2_이름 SET ++";                  
                        $scope.name = d; 
                    });

                    $scope.fnNC2SetValue = function()
                    {
                       // 본인 한테 
parentname 가 없기때문에,  부모한테 있는 parentname 값을 호출함,
                       alert($scope.parentname); // 부모의 parentname

                       //  parentname에 값을 셋팅 하면 (부모 자원인 읽기만 가능, 변경음 못함)
                       // 부모의 parentname 가 아닌, 본인스코프에 없었기때문에 새로은 parentname 생성
                       $scope.parentname = "xxx"; 

                       // 부모 $scope 로가서 값을 호출해보면 xxx 가  아님을 알 수 있다.
                       /// 결국 함수, 변수는 본인 $scope없을경우 부모 $scope 로 타고가면서 찾아감

                       alert($scope.parentname); // NChild2의 parentname

                       // $emit 로 부모의 brSetValue 이벤트 함수 호출 , 값으로는 name 전달
                       $scope.$emit("brSetValue" , $scope.name);
                    }
             
                });
        </script>
</body>
</html>
2018/04/05 16:39 2018/04/05 16:39