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

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