제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
Posted
Filed under jQuery

ng-bind 는 angular 의 변수 또는 model 과 연결되는 M-V 의 연결역할을 하는 Directive 이다. 또는, 인터폴레션으로 {{ }} 작성해도 같은 효과를 본다. 근데 공부를 하다보니 , 네임설정에 있어. period 가 들어간 네임이 작동하거나 , 안하는 경우가 있어, 정리해 두기로 했다.

# ng-bind 네임설정  #1  "일반적인 영문 / 영+숫자" 
<body ng-app="myApp">
        <div ng-controller="myCtrl">
            <div>name : <span ng-bind="name"></span></div>            
            <div>name : <span ng-bind="name12"></span></div>            
        </div>
          
        <script type="text/javascript">
                var m = angular.module("myApp" , []);    
                m.controller("myCtrl" , function($scope)
                {                    
                    $scope.name = "pluginn";     // 정상 작동
                    $scope.name12 = "pluginn12"  // 정상 작동
                });
        </script>
</body>
단,네임설정에있어, 숫자만으로 이루어진 명칭 또는 영문+숫자 혼용이 아닌 숫자+영문 인 경우 , 프로그램의 기초와 같은 개념을 갖고있어, 작동되지 않는다. (예, 1111,2342 , 11name  ,11price  모두 오류)


# ng-bind 네임설정  #2   "period 를 붙인 네임 name.nickname "
<body ng-app="myApp">
        <div ng-controller="myCtrl">      
            <div>name.nickname : <span ng-bind="name.nickname"></span></div>            
        </div>
          
        <script type="text/javascript">
                var m = angular.module("myApp" , []);    
                m.controller("myCtrl" , function($scope)
                {                    
                    $scope.name.nickname = "plug~ plug~"; // 오류발생 작동하지 않음
                });
        </script>
</body>
으잉 안된다 이상하네, 아래를 보자.

# ng-bind 네임설정  #3   "period 를 붙인 네임 name.nickname "  by ng-model
<body ng-app="myApp">
        <div ng-controller="myCtrl">      
           <input  type="text" ng-model="name.nickname"/>
            <div>name.nickname:<span ng-bind="name.nickname"></span></div><!-- 정상작동 -->
            <div>{{name.nickname}}</div> <!-- 정상작동(인터폴레이션)-->
        </div>
          
        <script type="text/javascript">
                var m = angular.module("myApp" , []);    
                m.controller("myCtrl" , function($scope)
                {                    
                   //  angluar 가 제어할수있도록, 컨트롤 등록만 해준다
                });
        </script>
</body>
음, ng-model 로 설정된 이름이는 객체처럼 접근이되는 네임이 가능하다. 그럼 예제를 하나더 들어보자


# ng-bind 네임설정  #3   "period 를 붙인 네임 name.nickname "  by Array
<body ng-app="myApp">
        <div ng-controller="myCtrl">     
            <div>name.nickname:<span ng-bind="name.nickname"></span></div> <!-- 정상작동-->
            <div>{{name.nickname}}</div> <!-- 정상작동(인터폴레이션)-->
        </div>
        <script type="text/javascript">
                var m = angular.module("myApp" , []); 

                m.controller("myCtrl" , function($scope)
                { 
                          var name = { nickname : "pluginn" };
                          $scope.name = name;               
                });
        </script>
</body>
작동된다. 결국 period(.) 의 의미는 프로그래밍에서와 마찬가지로 객체의 속성접근으로 봐야한다.
네임에는 . 를 사용하지 말자 , 

ng-Model (예, ng-model="name.first") 또는 배열과같은 객체명의 속성 성격의 period 네이밍은 가능하나, 변수명  자체로서의 period 사용은 자제하기로 하자. 일반적인 프로그래밍에서이 사용방법과 딱히 다를것이
없다.
2018/04/05 13:21 2018/04/05 13:21
Posted
Filed under jQuery
# ng-if
 ng-if  구문안의 조건이 맞으면 본인을 show 틀리면 hide
<body ng-app="myApp">
                <input type="text" ng-model="sbtxt" value="">
                <div ng-if="sbtxt == 'red' ">빨강색</div>
          
        </div>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
        <script type="text/javascript">
                var myApp = angular.module('myApp', []);
        </script>
</body>


# ng-switch on ~ ng-switch-when 문

 ng-switch on 에 연결된 ng-model 의 value 에 따라 ng-switch-when 조건에 설정된
 블럭들이 show/hide 됨 , 아래 예제
<body ng-app="myApp">

                <select id="sb" ng-model="sbcolor">
                    <option value="">선택</option>
                    <option value="1">red</option>
                    <option value="2">green</option>
                    <option value="3">blue</option>                                        
                </select>

                <div ng-switch  id="aa" on="sbcolor">                 
                  <div ng-switch-when="1" class="box red"></div>
                  <div ng-switch-when="2" class="box green"></div>
                  <div ng-switch-when="3" class="box blue"></div>
                  <div ng-switch-default class="box black"></div>
                </div>
          
        </div>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
        <script type="text/javascript">

                var myApp = angular.module('myApp', []);
        </script>
</body>


# ng-show , ng-hide
ng-show 구문 안의 조건이 맞으면 자신을 show 틀리면 hide 한다.
ng-hide   구문안의 조건이 맞으면 자신을 hide 하고 틀리면 show 한다.
<body ng-app="myApp">

                <input type="text" ng-model="sbtxt" value="">

                <div ng-show="sbtxt=='red' ">빨강색 O</div> <!-- 참이면 보임  -->
                <div ng-hide="sbtxt=='red' ">  빨강색 X</div>  <!-- 참이면 숨김 -->
          
        </div>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
        <script type="text/javascript">
                var myApp = angular.module('myApp', []);
        </script>
</body>


# ng-class
ng-class 구문안에 조건에 만족하면 선언한 클래스가 블럭에 적용된다.
ng-class = "{클래스명 : 조건 , 클래스명 : 조건 , 클래스명 : 조건.......}"
<style type="text/css">
    .red {color:#F00}
    .green {color:#0F0}
    .blue {color:#00F}
</style>
<body ng-app="myApp">
       <input type="text" ng-model="sbtxt" value="">
       <div ng-class="{red : sbtxt == 'red' , blue : sbtxt == 'blue' }">안녕하세요</div>          
        </div>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
        <script type="text/javascript">
                var myApp = angular.module('myApp', []);
        </script>
</body>
2018/04/04 14:03 2018/04/04 14:03