AngularJS1.x 입문·상용 지령 및 사용자 정의 지령

==AngularJS 입문 시리즈 블로그는 입문 빠른 개발 참고로 하고 심층적인 내용은 보충해야 한다==
일반 명령

ng-change: 원소값이 바뀔 때 감청 이벤트


<body ng-app="main">
    <div ng-controller="indexController">
          10,  <input ng-model="num" ng-change="changeHello()" />,  <input ng-model="total" />
    div>
    <script type="text/javascript" src="../js/angular-1.6.4/angular.min.js">script>
    <script type="text/javascript">
        var app = angular.module("main", []);
        app.controller("indexController", ['$scope', function($scope) {
            $scope.total=$scope.num*10;
            $scope.num=1;
            $scope.changeHello = function() {
                $scope.total=10*$scope.num
            };
        }]);
    script>
body>

ng-class: 변수 브리 값에 따라class

동적 표시

-- CSS -->
.red{color:#DD1144;}
.blue{color:#0000FF}

ng-class의 표현식: 모델에서 showRed가true일 때 표시됩니다.red 스타일, showBlue가true일 때 표시됩니다.블루 스타일.단추를 누르면changeColor 함수를 터치하고true는false,false는true로 변환하여 css 스타일을 동적 전환합니다.

<body ng-app="main">
    <div ng-controller="indexController">
        <p ng-class="{'red':showRed,'blue':showBlue}">       p>
        <button class="btn btn-primary" ng-click="changeColor()">    button>
    div>
    <script type="text/javascript" src="../js/angular-1.6.4/angular.min.js">script>
    <script type="text/javascript">
        var app = angular.module("main", []);
        app.controller("indexController", ['$scope', function($scope) {
            $scope.showRed=true;
            $scope.showBlue=false;
            $scope.changeColor=function(){
                $scope.showRed=!$scope.showRed;
                $scope.showBlue=!$scope.showBlue;
            };
        }]);
    script>
body>

ng-controller: controller의 작용 범위 지정

ng-dblclick: 이벤트를 두 번 클릭하면ng-click과 같습니다.

ng-hide/ng-show: 위와 같은 예를 동적으로 표시하거나 숨기면 서로 다른 색의 글꼴을 동적으로 표시할 수 있음


<div ng-controller="indexController">
    <p class="red" ng-show="showRed">       p>
    <p class="blue" ng-hide="showRed">       p>
    <button class="btn btn-primary" ng-click="changeColor()">    button>
div>

ng-keypress: 버튼 이벤트를 감청합니다.예를 들어 input 검색 상자에서 리턴 키를 누르면 키워드 검색을 시작합니다


<body ng-app="main">
    <div ng-controller="indexController">
        <input type="text" ng-model="keyword" ng-keypress="search($event)" />
    div>
    <script type="text/javascript" src="../js/angular-1.6.4/angular.min.js">script>
    <script type="text/javascript">
        var app = angular.module("main", []);
        app.controller("indexController", ['$scope', function($scope) {
            $scope.keyword="";
            $scope.search=function($event){
                if(13==$event.keyCode){
                    alert("     "+$scope.keyword+"      ... ");
                }
            };
        }]);
    script>
body>

ng-repeat: 두루 다니다.


<body ng-app="main">
    <div ng-controller="indexController">
        <ul>
            <li ng-repeat="item in books">
                {{item}}                    
            li>
        ul>
    div>
    <script type="text/javascript" src="../js/angular-1.6.4/angular.min.js">script>
    <script type="text/javascript">
        var app = angular.module("main", []);
        app.controller("indexController", ['$scope', function($scope) {
            $scope.books=['Java','Javascript','python','Mysql'];
        }]);
    script>
body>

사용자 지정 명령
먼저 몇 가지 가장 간단한 지령 예를 살펴보자.
예 1: 고정된 템플릿 컨텐츠 표시

<body ng-app="main">
    <div ng-controller="indexController">
        <span hello>      span>  <br />
        <hello>      hello>       <br />
        <span class="hello">      span><br />
        
    div>
    <script type="text/javascript" src="../js/angular-1.6.4/angular.min.js">script>
    <script type="text/javascript">
        var app = angular.module("main", []);
        app.directive('hello',function(){
            return {
                restrict:'ACEM',
                template:'Hello Angular ... ',
                replace:true,
                transclude:false
            };
        });
    script>
body>

해석: 1.directive 함수를 사용하여 hello라는 새 명령을 만듭니다.생성된 명령 이름이 낙타봉이면 주의하십시오.명령 app를 만듭니다.directive(‘helloWorld’,function(){ … });사용할 때는'-'로 연결해야 하는데,

<span hello-world>span>

directive 함수가 대상을 되돌려줍니다.restrict는 명령어의 식별 규칙을 정의했다.

A는attribute를 식별하여 속성명으로 사용한다.

E는 Element을 식별하여 라벨로 사용합니다.

C는class를 식별하여class로 사용한다.

M은 주석을 식별하여 주석으로 사용하는데 양쪽에 빈칸이 있어야 한다. ==A E==

권장

template 명령이 표시하는 내용 템플릿입니다.

replace는 이 명령의 HTML 요소의 내용을 템플릿의 내용으로 덮어쓸지 여부를 표시합니다.

transclude가true라면 명령어 내부의 내용을 템플릿에 덮어쓰지 않고 끼워 넣으려는 것을 의미합니다.transclude가true라면 템플릿에ng-transclude 명령어가 있는 용기(div나span)를 제공하여 명령어 내부의 내용을 저장해야 합니다.예:

app.directive('hello',function(){
    return {
        restrict:'ACEM',
        template:'Hello Angular ... ',
        replace:false,
        transclude:true
    };
});

네가 이렇게 사용할 때

<span hello>                      ng-transclude      span>

페이지가 표시됩니다.

Hello Angular ...                       ng-transclude

예제 2: DOM 바인딩 이벤트

<body ng-app="main">
    <div ng-controller="indexController">
        <p ng-bind="count">p>
        <button class="btn btn-primary" hello>countbutton>
    div>
    <script type="text/javascript" src="../js/angular-1.6.4/angular.min.js">script>
    <script type="text/javascript">
        var app = angular.module("main", []);
        app.controller("indexController", ['$scope', function($scope) {
            $scope.count=1;
        }]);
        app.directive('hello',function(){
            return {
                restrict:'A',
                link:function(scope,element,attrs){
                    element.on('click',function(){
                        scope.$apply(function(){
                            scope.count++;
                        });
                    });
                }
            };
        });
    script>
body>

scope에서count 속성을 초기화하고 값을 부여합니다 1,p 라벨은count,hello 지령:hello 지령이 있는 요소는click 이벤트를 바꿉니다.count가1을 한 번 클릭하면 됩니다.해석: 링크: 보통 링크 함수에서dom에 대한 동작을 봉인합니다.매개 변수: 1.scope: scope 역할 영역을 직접 가리키지 않았을 때, 이 scope는 controller의 scope를 공유합니다.2.element: 지표는 이 지령을 기억하고 angular에 의해 봉인된 요소로 기본적인 방법을 봉인하였으며 jQuery 봉인법과 차이가 많지 않다.3. attrs: 이 명령의 요소의 모든 속성이 봉인된 대상을 표시합니다.예를 들어 이 예에서 Hello 명령을 표시한 button은class 속성을 가지고 있으며attrs를 사용할 수 있다.class 속성의 값을 꺼냅니다.!!!구덩이를 주의하십시오. 이 곳의 속성 이름은 모두 소문자로 바뀔 것입니다. 만약 당신의 속성 이름에 대문자가 있다면 반드시 주의해야 합니다.4. 클릭 함수에서 호출됨
scope.$apply(function(){ … })
만약 우리가 이 바깥쪽의 소포를 제거하면 클릭 함수에 직접 쓴다scope.count++.페이지의count값은 변하지 않았지만 브라우저 debug js에서 scope의 값이 사실은 바뀌었고 페이지가 응답하지 않았을 뿐입니다.만약에 우리 스스로angular의 양방향 데이터 연결을 실현한다면 적어도 두 걸음은 있어야 한다.데이터 모델과 보기의 변화를 감청하다.2. 보기 데이터가 변할 때 모델에 업데이트 모델 데이터를 알려주고 모델 데이터가 변할 때 보기에 보기 내용을 업데이트하라고 알려준다.$apply()는 바로 이 통지의 일을 한 것이다. 구체적인 실현 원리는 다음에 우리가 다시 연구한 결과 그의 참여는 하나의 함수이다.어떤 상황에서 이것$apply()을 호출해야 합니까?대부분의 경우 수동으로 호출할 필요가 없다. angular가 자체로 가지고 있는 명령, 예를 들어ng-click,angular에 내장된 서비스$http() ``$timeout()를 사용할 때angular는 이미 우리에게 이 함수를 호출했다. 우리가 사용할 때 호출할 필요가 없고 수동으로 호출하면 오히려 오류가 발생할 수 있다.상기 예에서 우리는angular의 지령이나 서비스를 사용하지 않고 일반적인 이벤트 감청을 사용하기 때문에$apply() 수동으로 호출해야 한다.
예 3: 명령 독립 scope

<body ng-app="main">
    <div ng-controller="indexController">
        <p>{{username}}p>
        <p hello>
            {{username}}        
        p>
    div>
    <script type="text/javascript" src="../js/angular-1.6.4/angular.min.js">script>
    <script type="text/javascript">
        var app = angular.module("main", []);
        app.controller("indexController", ['$scope', function($scope) {

        }]);
        app.directive('hello',function(){
            return {
                scope:true, /*   scope:{}               scope*/
                restrict:'A',
                controller:function($scope){
                    $scope.username='Mike';
                }
            };
        });
    script>
body>

또는 Hello 명령은 사용자 정의 명령에서 되돌아오는 대상에 ===scope:true=를 설정하여 명령을 설명하는 scope가 개인임을 표시하고 명령에 독립된 컨트롤러를 만듭니다. 개인 scope에 값을 부여하는username 속성은 Mike이고 페이지에서 Hello 명령에서username를 가져오는 것은 얻을 수 있지만 Hello 명령에서 가져오는username는 값은 없습니다.
예4: 독립된 scope의 데이터를 외부 컨트롤러에 연결하도록 명령하는 scope 정책
'@'+ {}} 정책::문자열 전달, 데이터 단방향 귀속, 명령 외부 scope의 모델 데이터를 수정할 때 명령 내부 귀속의 모델 값은 바뀌지만 명령 내부의 모델 값을 수정할 때 외부 값은 바뀌지 않습니다.

<body ng-app="main">
    <div ng-controller="indexController">
        <p>{{username}}p>
        indexController  scope  <input type="text" ng-model="username" />
        <p hello name="{{username}}">
                scope: {{name}}     
        p>
    div>
    <script type="text/javascript" src="../js/jquery1.12.4.min.js">script>
    <script type="text/javascript" src="../js/angular-1.6.4/angular.min.js">script>
    <script type="text/javascript">
        var app = angular.module("main", []);
        app.controller("indexController", ['$scope', function($scope) {
            $scope.username="Lily";
        }]);
        app.directive('hello',function(){
            return {
                scope:{
                    name:'@'
                }, 
                restrict:'A',
                relplace:true,
                template:'    scope   :{{name}}
',
                link:function(scope,ele,attrs){
                    $(ele).find("button").on("click",function(){
                        scope.$apply(function(){
                            scope.name="Mike";
                        });
                    });
                }
            };
        });
    script>
body>

이 예에는 jQuery가 도입되었다.해석: index Controller의 scope에 있는username의 값을 사용자 정의 명령 Hello에 전달합니다. input 상자는 index Controller의 scope에 연결된 모델입니다. 명령 템플릿에 있는button에 클릭 이벤트를 추가하고 단추를 눌렀을 때 개인 scope에 있는name의 값을 변경합니다.실행 결과: input 상자에서 명령을 바꾸면 모든 scope의 값도 변화에 응답합니다. @ 귀속 정책은 모델의 값을 명령에 전달하고 문자열을 전달하는 것입니다.그러나 우리가 단추를 눌러서 개인 scope의name 값을 바꿀 때 index Controller의scope는 이러한 변화에 응답하지 않습니다
'='정책: 모델 객체 전달


...
scope:{
    name:'@'
    ...
}
...


...
<p hello name="username">
...

해석:'='귀속 정책은 대상의 운행 결과를 전달한다. 두 scope에서 모델의 값은 양방향으로 귀속되어 있으며 어느 것을 바꾸면 다른 것도 이러한 변화에 응답한다.
'&' 정책: 함수 전달, 명령 호출

<body ng-app="main">
    <div ng-controller="indexController">
        <p hello say="sayEnglish()">p>
    div>
    <script type="text/javascript" src="../js/angular-1.6.4/angular.min.js">script>
    <script type="text/javascript">
        var app = angular.module("main", []);
        app.controller("indexController", ['$scope', function($scope) {
            $scope.sayEnglish=function(){
                alert('Good Morning!');
            };
        }]);
        app.directive('hello',function(){
            return {
                scope:{
                    say:'&'
                }, 
                restrict:'A',
                relplace:true,
                template:'
'
            };
        });
    script>
body>

해석: 외부 index Controller의 scope에서say Englisg () 방법을 명령에 전달하고 명령 내부에서say () 방법을 호출할 때 실제는say English () 를 호출한다.

AngularJS1.x 입문·상용 지령 및 사용자 정의 지령

좋은 웹페이지 즐겨찾기