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

Posted
Filed under jQuery

모듈로 다루어지는 angular 에서는 각 콘트롤별로 $scope 라는 일종에 개체를 가지게 되는데, 개인적으로는  this 와 꽤
비슷한 느낌이다. (물론 개념적으로는 다르다)

각각의 controller 들은 각각의 $scope 와 연결되어 MVC 를 오가며, 데이터를 전달하고 연결한다. 하지만 각각의 $scope 는 다른 $scope 즉 컨트롤들의 영역을 공유할 수 없다. 간혹 각각 다른 $scope 간의 데이터를 주고 받아야할때가 있는데,  그리도 지금 소개할 ,  $emit , $on , $broadcast 를 활용하는 방법이다.
(단, DOM 구조상 부모 $scope 인 경우,  자식 $scope 의 바인드 변수 접근이 가능함)

간단하게 보자면,
- 같은 노드위치의 $scope 끼리는 $scope 로 데이터를 전달할 수 없다.
- 자식 $scope 에서 부모 $scope 의 함수 및 변수를 호출 할수 있다, (단, 변경할 수 는 없다.)

자식 $scope에서 $emit  메소드를 통해 부모의 이벤트 함수를 호출하여 값을 전달하고, 값을 받은 부모는 다른 자식 $scope의 이벤트 함수를 호출해서 값을 전달해준다.

설명보다는 예제를 통한 설명이 쉬울꺼같아 예제의 주석으로 설명을 대체한다 (나중에 개인적으로 꺼내봤을대도 쉽다 --)

 <!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="scopeTest">
          <div ng-controller="ncParent">
                    <div ng-controller="ncChild1">
                              ncChild1-var1 : <span ng-bind="var1"></span> /
                              ncChild1-varA : <span ng-bind="varA"></span>
                    </div>
                    <div ng-controller="ncChild2">
                              ncChild2-var1 : <span ng-bind="var1"></span> /
                              ncChild2-varB : <span ng-bind="varB"></span>
                    </div>
                    <div ng-controller="ncChild3">
                              ncChild3-var1 : <span ng-bind="var1"></span> /
                              ncChild3-varC : <span ng-bind="varC"></span>
                    </div>

                    <button ng-click="fnBroadCast()">자식에게전달</button>
</div>
<!--
          $on("이벤트명" , function(event, data) {})
          $emit() - 특정 범위를 이벤트로 부모에게 전달. - ($rootScope가 아닌 DOM 구조의 부모 이벤트 호출)
          $broadcast() - 특정 범위를 모든 자식에게 전달.- 부모(DOM) 하위 자식의 이벤트 함수 호출
          $emit("호출이벤트명" , 전달할데이터) 
          $broadcast("호출할 자식의 이벤트명" , 전달할데이터) 
          $on , $emit , $broadcase 메소드 메커니즘
          1) 자식1 본인 값을 $emit() 통해 부모에게만, 전달하고 
          2) 그 값을 받은 부모는 $broadcast 로 자식의 이벤트 함수들을 모두 호출
          부모가 $boardcase 로 호출 당하고 싶은 자식들은 $on 메소더를 구현해야놔야한다.
          1)ncChild1 에서 부모로 scope을 전달
          2)ncParent는 $on() 메소드를 사용하여 이벤트를 감지
          3)ncParent가 전달받은 값(범위)을 $broadcast() 메소드를 사용하여 자식요소로 전달

 -->
<script lang="javascript">
var app = angular.module("scopeTest" , []);
app.controller("ncChild1" , function($scope)
{
         $scope.var1 = "Pluginn";
         $scope.$emit("sendVar1" , $scope.var1); // 자신의 부모 이벤트함수(sendVar1) 호출
         $scope.$on("getVar1" , function(event ,data)
         {
                  $scope.varA = data;
         });
});
app.controller("ncChild2" , function($scope)
{
         // 부모로부터 $broadcast 될 함수
         $scope.$on("getVar1" , function(event, data) 
         {
                  $scope.varB = data;
         });
});
app.controller("ncChild3" , function($scope)
{
         // 부모로부터 $broadcast 될 함수
         $scope.$on("getVar1" , function(event , data) 
         {
                  $scope.varC = data;
         });
});
app.controller("ncParent" , function($scope)
{
         $scope.$on("sendVar1" , function(event ,data)
         {
                  // tes1, test2, test3의 parent $scope 로써 자식 $scope 의 binder 접근가능
                  // 자식의 var1 변수로 모두 접근되는것을 볼수있다.
                  $scope.var1 = data;
         });
         $scope.fnBroadCast = function()
         {
                  alert("전달");

                  // 자식 $scope 에 등록된 이벤트 함수를 호출 
                  $scope.$broadcast("getVar1", $scope.var1);   
         }
});
</script>
</body>
</html>
2018/03/27 17:09 2018/03/27 17:09