AngularJS => 사용자 지정 지시문

소개

여기 AngularJS의 지시어 기능에 대해 배웁니다. 아래에서 지시어에 대한 정보와 사용법에 대한 기본 및 고급 예제를 볼 수 있습니다.

매개 변수

매개 변수	세부
범위	지시문의 범위를 설정하는 속성입니다. false, true 또는 격리 범위로 설정할 수 있습니다. {@, =, <, &}.
범위 : 거짓	지시어는 부모 범위를 사용합니다. 지시어에 대해 만들어진 범위가 없습니다.
scope : true	지시문은 부모 범위를 프로토 타입 적으로 새 하위 범위로 상속합니다. 같은 요소에 새로운 범위를 요청하는 지시문이 여러 개 있으면 하나의 새로운 범위를 공유합니다.
범위 : {@}	지시어 범위 속성을 DOM 속성 값에 바인딩하는 한 가지 방법. 부모에서 바인드 된 속성 값은 지시어 범위에서 변경됩니다.
범위 : {=}	지시어 속성이 변경되면 부모의 속성을 변경하는 양방향 속성 바인딩. 반대의 경우도 마찬가지입니다.
범위 : {<}	지시어 범위 속성과 DOM 속성 표현식의 단방향 바인딩. 표현식은 상위에서 평가됩니다. 부모 값의 신원을 감시하므로 부모의 객체 속성에 대한 변경 사항이 지시문에 반영되지 않습니다. 지시어의 객체 속성에 대한 변경 사항은 동일한 객체를 참조하기 때문에 부모에 반영됩니다
범위 : {&}	지시문이 부모에서 평가할 표현식에 데이터를 전달할 수있게합니다.
컴파일 : 함수	이 함수는 링크 함수가 실행되기 전에 지시문 템플릿에서 DOM 변환을 수행하는 데 사용됩니다. `tElement` (지정 문 템플리트) 및 `tAttr` (지정 문에 선언 된 속성 목록)을 `tAttr` 합니다. 범위에 액세스 할 수 없습니다. `post-link` 함수로 등록 될 함수를 반환하거나 `pre-link` 및 `post-link` 함수로 등록 된 `pre` 및 `post` 속성을 가진 객체를 반환 할 수 있습니다.
link : 함수 / 객체	link 속성은 함수 또는 객체로 구성 할 수 있습니다. scope (지시어 범위), iElement (지시어가 적용되는 DOM 요소), iAttrs (DOM 요소 속성 모음), controller (지시어에 의해 요구되는 컨트롤러 배열), transcludeFn과 같은 인수를받을 수 있습니다. 주로 DOM 리스너 설정, 변경 사항 모델 속성보기 및 DOM 업데이트에 주로 사용됩니다. 템플릿이 복제 된 후에 실행됩니다. 컴파일 기능이 없으면 독립적으로 구성됩니다.
사전 연결 기능	자식 링크 함수보다 먼저 실행되는 링크 함수입니다. 기본적으로 하위 디렉 티브 링크 기능은 상위 디렉 티브 링크 기능보다 먼저 실행되고 사전 링크 기능은 상위 링크가 먼저 링크되도록합니다. 한 가지 유스 케이스는 자식이 부모로부터 데이터를 필요로하는 경우입니다.
사후 링크 기능	하위 요소 이후의 임원이 상위에 링크되는 링크 기능. 이것은 이벤트 핸들러를 연결하고 하위 디렉티브를 액세스하는 데 일반적으로 사용되지만 하위 디렉 티브가 이미 링크되어 있기 때문에 하위 디렉 티브에 필요한 데이터는 여기에 설정하면 안됩니다.
restrict : 문자열	DOM 내에서 지시어를 호출하는 방법을 정의합니다. `E` - 요소 이름 ( `<demo-directive></demo-directive>` ), `A` - 속성 ( `<div demo-directive></div>` ), `C` 일치하는 클래스 (예 : 우리의 지시어 이름을 `demoDirective` 가정) `<div class="demo-directive"></div>` ), `M` - 주석으로 ( `<!-- directive: demo-directive -->` ). `restrict` 속성은 여러 옵션을 지원할 수도 있습니다. 예 `restrict: "AC"` - `restrict: "AC"` 는 지시문을 Attribute 또는 Class 로 제한합니다. 생략되면 기본값 은 `"EA"` (요소 또는 속성)입니다.
require : 'demoDirective'	현재 요소에서 demoDirective의 컨트롤러를 찾아 연결 함수의 네 번째 인수로 컨트롤러를 삽입합니다. 발견되지 않으면 오류를 던집니다.
require : '? demoDirective'	demoDirective의 컨트롤러를 찾거나 찾지 못한 경우 링크 fn에 null을 전달하십시오.
require : '^ demoDirective'	요소와 그 부모를 검색하여 demoDirective의 컨트롤러를 찾습니다. 발견되지 않으면 오류를 던집니다.
require : '^^ demoDirective'	요소의 부모를 검색하여 demoDirective의 컨트롤러를 찾습니다. 발견되지 않으면 오류를 던집니다.
require : '? ^ demoDirective'	요소와 그 부모를 검색하여 demoDirective의 컨트롤러를 찾거나 찾지 못한 경우 링크 fn에 null을 전달하십시오.
require : '? ^^ demoDirective'	요소의 부모를 검색하여 demoDirective의 컨트롤러를 찾거나 찾지 못한 경우 링크 fn에 null을 전달합니다.

사용자 지정 지시문 만들기 및 사용

지시어는 angularjs의 가장 강력한 특징 중 하나입니다. 사용자 정의 angularjs 지시문은 html 태그에 특정 동작을 제공하기 위해 새로운 html 요소 또는 사용자 정의 속성을 작성하여 html의 기능을 확장하는 데 사용됩니다.

지시 .js

// Create the App module if you haven't created it yet
var demoApp= angular.module("demoApp", []);

// If you already have the app module created, comment the above line and create a reference of the app module
var demoApp = angular.module("demoApp"); 


// Create a directive using the below syntax
// Directives are used to extend the capabilities of html element 
// You can either create it as an Element/Attribute/class      
// We are creating a directive named demoDirective. Notice it is in CamelCase when we are defining the directive just like ngModel
// This directive will be activated as soon as any this element is encountered in html

demoApp.directive('demoDirective', function () {
    
  // This returns a directive definition object
  // A directive definition object is a simple JavaScript object used for configuring the directive’s behaviour,template..etc
  return {
    // restrict: 'AE', signifies that directive is Element/Attribute directive, 
    // "E" is for element, "A" is for attribute, "C" is for class, and "M" is for comment. 
    // Attributes are going to be the main ones as far as adding behaviors that get used the most.
    // If you don't specify the restrict property it will default to "A"
    restrict :'AE',  

    // The values of scope property decides how the actual scope is created and used inside a directive. These values can be either “false”, “true” or “{}”. This creates an isolate scope for the directive.
    // '@' binding is for passing strings. These strings support {{}} expressions for interpolated values.
    // '=' binding is for two-way model binding. The model in parent scope is linked to the model in the directive's isolated scope.
    // '&' binding is for passing a method into your directive's scope so that it can be called within your directive. 
    // The method is pre-bound to the directive's parent scope, and supports arguments.
    scope: { 
      name: "@",  // Always use small casing here even if it's a mix of 2-3 words
    },                  

    // template replaces the complete element with its text. 
    template: "<div>Hello {{name}}!</div>",
                
    // compile is called during application initialization. AngularJS calls it once when html page is loaded.
    compile: function(element, attributes) {
      element.css("border", "1px solid #cccccc");
                    
      // linkFunction is linked with each element with scope to get the element specific data.
      var linkFunction = function($scope, element, attributes) {
        element.html("Name: <b>"+$scope.name +"</b>");
        element.css("background-color", "#ff00ff");
      };
      return linkFunction;
    }
  };
});

이 지시어는 App에서 다음과 같이 사용할 수 있습니다.

<html>
   
   <head>
      <title>Angular JS Directives</title>
   </head>
   <body>
   <script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <script src="directive.js"></script>   
    <div ng-app = "demoApp">
       <!-- Notice we are using Spinal Casing here -->  
       <demo-directive name="World"></demo-directive>
     
      </div>
   </body>
</html>

지시문 정의 객체 템플리트

demoApp.directive('demoDirective', function () {
  var directiveDefinitionObject = {
    multiElement:  
    priority:
    terminal:
    scope: {},  
    bindToController: {},
    controller:
    controllerAs:
    require:
    restrict:
    templateNamespace:
    template:
    templateUrl:
    transclude:
    compile: 
    link: function(){}                                  
  };
  return directiveDefinitionObject;
});

multiElement - true로 설정되고 지시문 이름의 시작과 끝 사이의 모든 DOM 노드가 수집되고 지시문 요소로 함께 그룹화됩니다.
priority - 하나의 DOM 요소에 여러 개의 지시문이 정의 된 경우 지시문을 적용하여 지시문을 적용 할 수 있습니다. 높은 숫자의 지시문이 먼저 컴파일됩니다.
terminal - true로 설정하면 현재 우선 순위는 실행할 지시문 집합이됩니다.
scope - 지시어의 범위를 설정합니다.
bind to controller 바인딩 - 범위 속성을 직접 지시문 컨트롤러에 바인딩합니다.
controller - 컨트롤러 생성자 함수
require - 다른 지시어를 요구하고 컨트롤러를 연결 함수의 네 번째 인수로 주입합니다.
controllerAs - 컨트롤러가 지시문 템플릿에서 참조 될 수 있도록 지시문 범위의 컨트롤러에 대한 이름을 지정합니다.
restrict - 지시어를 요소, 속성, 클래스 또는 설명으로 제한
templateNameSpace - 지시어 템플릿에서 사용되는 문서 유형을 설정합니다 (html, svg 또는 math). html이 기본값입니다.
template - 지시어의 요소 내용을 바꾸는 것을 기본값으로하거나, transclude가 true 인 경우 지시어 요소의 내용을 감싸는 html 마크 업
templateUrl - templateUrl 대해 비동기 적으로 제공되는 url입니다.
transclude - 지시어가 나타나는 곳에서 요소의 내용을 추출하고 지시어에서 사용할 수 있도록합니다. 내용은 컴파일되어 중계 기능으로 지시문에 제공됩니다.
compile - 템플릿 DOM을 변형시키는 함수
link - 컴파일 속성이 정의되지 않은 경우에만 사용됩니다. 링크 함수는 DOM 리스너 등록과 DOM 업데이트를 담당합니다. 템플릿이 복제 된 후에 실행됩니다.

기본 지시문 예

superman-directive.js

angular.module('myApp', [])
  .directive('superman', function() {
    return {
      // restricts how the directive can be used
      restrict: 'E',
      templateUrl: 'superman-template.html',
      controller: function() {
        this.message = "I'm superman!"
      },
      controllerAs: 'supermanCtrl',
      // Executed after Angular's initialization. Use commonly 
      // for adding event handlers and DOM manipulation
      link: function(scope, element, attributes) {
        element.on('click', function() {
          alert('I am superman!')
        });
      }
    }
  });

superman-template.html

<h2>{{supermanCtrl.message}}</h2>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="superman-directive.js"><script/>
</head>
<body>
<div ng-app="myApp">
  <superman></superman>
</div>
</body>
</html>

지시어의 restrict 및 link 기능에 대한 자세한 내용은 AngularJS의 공식 문서

지시어를 사용하여 resuable 컴포넌트를 만드는 법

AngularJS 지시문은 AngularJS 응용 프로그램에서 HTML 렌더링을 제어하는 명령입니다. HTML 요소, 속성, 클래스 또는 주석이 될 수 있습니다. 지시어는 DOM을 조작하고, HTML 요소에 새로운 동작을 추가하고, 데이터 바인딩 등을하는 데 사용됩니다. 각이 제공하는 지시문의 예로는 ng-model, ng-hide, ng-if가 있습니다.

마찬가지로 사용자 지정 지시문을 만들어서 다시 작성할 수 있습니다. 사용자 지정 지시문 참조 만들기. 재사용 가능한 지시어를 만드는 배후의 의미는 angularj가 angle.js를 사용하여 우리에게 제공하는 것과 같이 지시어 / 구성 요소 세트를 작성하는 것입니다. 이러한 재사용 가능한 지시문은 일관된 동작, 모양 및 느낌이 필요한 응용 프로그램 / 응용 프로그램 모음을 가지고있을 때 특히 유용 할 수 있습니다. 이러한 재사용 가능한 구성 요소의 예는 응용 프로그램이나 다른 응용 프로그램에서 사용할 수 있지만 동일하게 보이거나 동일하게 보이기를 원하는 간단한 도구 모음 일 수 있습니다.

첫째, 앱 폴더에 resuableComponents라는 폴더를 만들고 reusableModuleApp.js를 만듭니다.

reusableModuleApp.js :

(function(){

 var reusableModuleApp = angular.module('resuableModuleApp', ['ngSanitize']);

 //Remember whatever dependencies you have in here should be injected in the app module where it is intended to be used or it's scripts should be included in your main app  
                               //We will be injecting ng-sanitize

 resubaleModuleApp.directive('toolbar', toolbar)

 toolbar.$inject=['$sce'];

 function toolbar($sce){

     return{ 
     restrict :'AE',
        //Defining below isolate scope actually provides window for the directive to take data from app that will be using this.
        scope : {
                value1: '=',
                value2: '=',
                },

         }
     template : '<ul>  <li><a ng-click="Add()" href="">{{value1}}</a></li>  <li><a ng-click="Edit()" href="#">{{value2}}</a></li> </ul> ',
         link : function(scope, element, attrs){
           
              //Handle's Add function
              scope.Add = function(){


              };

              //Handle's Edit function
              scope.Edit = function(){

              };
     }
  }

});

mainApp.js :

(function(){
   var mainApp = angular.module('mainApp', ['reusableModuleApp']); //Inject resuableModuleApp in your application where you want to use toolbar component
   
   mainApp.controller('mainAppController', function($scope){
      $scope.value1 = "Add";
      $scope.value2 = "Edit"; 
   
   });
 
 });

index.html :

 <!doctype html>
 <html ng-app="mainApp">
 <head>
  <title> Demo Making a reusable component
 <head>
  <body ng-controller="mainAppController">
   
     <!-- We are providing data to toolbar directive using mainApp'controller -->
     <toolbar value1="value1" value2="value2"></toolbar>
  
    <!-- We need to add the dependent js files on both apps here -->
     <script src="js/angular.js"></script>
     <script src="js/angular-sanitize.js"></script>
    
     <!-- your mainApp.js should be added afterwards --->
      <script src="mainApp.js"></script>

     <!-- Add your reusable component js files here -->
      <script src="resuableComponents/reusableModuleApp.js"></script>

  </body>
 </html>

지시문은 기본적으로 재사용 가능한 구성 요소입니다. 별도의 각 모듈에서 지시문을 만들면 실제로 다른 angularJs 응용 프로그램에서 내보낼 수 있고 재사용 할 수 있습니다. 새로운 지시문은 reusableModuleApp.js 안에 간단히 추가 할 수 있으며 reusableModuleApp는 자체 컨트롤러, 서비스, DDO 객체 내부에 동작을 정의 할 수 있습니다.

템플릿과 격리 된 범위가있는 기본 지시문

격리 된 범위 로 사용자 지정 지시문을 만들면 지시문 내부 의 범위가 외부 범위와 분리되어 지시문이 실수로 부모 범위의 데이터를 변경하지 못하도록하고 부모 범위에서 개인 데이터를 읽지 못하도록 제한합니다.

격리 된 범위를 만들고 사용자 지정 지시문이 외부 범위와 통신 할 수있게하려면 지시문 내부 범위의 바인딩을 외부 범위와 매핑 하는 방법을 설명하는 scope 옵션을 사용할 수 있습니다.

실제 바인딩은 지시문에 첨부 된 추가 속성 으로 만들어집니다. 바인딩 설정은 scope 옵션과 키 - 값 쌍이있는 객체로 정의됩니다.

우리 지시문의 격리 된 범위 속성에 해당하는 키

Angular가 지시어 내부 범위와 일치하는 속성 을 어떻게 묶는지를 알려주는 값 .

격리 된 범위가있는 지시문의 간단한 예는 다음과 같습니다.

var ProgressBar = function() {
  return {
    scope: { // This is how we define an isolated scope
      current: '=', // Create a REQUIRED bidirectional binding by using the 'current' attribute
      full: '=?maxValue' // Create an OPTIONAL (Note the '?'): bidirectional binding using 'max-value' attribute to the `full` property in our directive isolated scope 
    }
    template: '<div class="progress-back">' +
              '  <div class="progress-bar"' +
              '       ng-style="{width: getProgress()}">' +
              '  </div>' + 
              '</div>',
    link: function(scope, el, attrs) {
      if (scope.full === undefined) {
        scope.full = 100;
      }
      scope.getProgress = function() {
        return (scope.current / scope.size * 100) + '%';
      }
    }
  }
}

ProgressBar.$inject = [];
angular.module('app').directive('progressBar', ProgressBar);

이 지시어를 사용하고 제어기의 범위에서 지시어의 내부 범위에 데이터를 바인딩하는 방법의 예 :

제어 장치:

angular.module('app').controller('myCtrl', function($scope) {
    $scope.currentProgressValue = 39;
    $scope.maxProgressBarValue = 50;
});

전망:

<div ng-controller="myCtrl">
    <progress-bar current="currentProgressValue"></progress-bar>
    <progress-bar current="currentProgressValue" max-value="maxProgressBarValue"></progress-bar>
</div>

재사용 가능한 구성 요소 만들기

지시문을 사용하여 재사용 가능한 구성 요소를 작성할 수 있습니다. 다음은 "사용자 상자"구성 요소의 예입니다.

userBox.js

angular.module('simpleDirective', []).directive('userBox', function() {
  return {
    scope: {
        username: '=username',
        reputation: '=reputation'
    },
    templateUrl: '/path/to/app/directives/user-box.html'
  };
});

Controller.js

var myApp = angular.module('myApp', ['simpleDirective']);

myApp.controller('Controller', function($scope) {

    $scope.user = "John Doe";
    $scope.rep = 1250;

    $scope.user2 = "Andrew";
    $scope.rep2 = 2850;

});

myPage.js

<html lang="en" ng-app="myApp">
  <head>
    <script src="/path/to/app/angular.min.js"></script>
    <script src="/path/to/app/js/controllers/Controller.js"></script>
    <script src="/path/to/app/js/directives/userBox.js"></script>
  </head>

  <body>
  
    <div ng-controller="Controller">
        <user-box username="user" reputation="rep"></user-box>
        <user-box username="user2" reputation="rep2"></user-box>
    </div>
    
  </body>
</html>

user-box.html

<div>{{username}}</div>
<div>{{reputation}} reputation</div>

결과는 다음과 같습니다.

John Doe
1250 reputation
Andrew
2850 reputation

지시계 장식 자

때로는 지시문의 추가 기능이 필요할 수도 있습니다. 지시문을 다시 작성 (복사)하는 대신 지시문이 작동하는 방법을 수정할 수 있습니다.

데코레이터는 $ inject 단계에서 실행됩니다.

그렇게하려면 .config 파일을 모듈에 제공하십시오. 이 지시문은 myDirective라고하며, 따라서 myDirectiveDirective를 설정해야합니다. (각양 각색의 규칙 [제공자에 대한 정보] 참조).

이 예는 지시문의 templateUrl을 변경합니다.

angular.module('myApp').config(function($provide){
        $provide.decorator('myDirectiveDirective', function($delegate){
             var directive = $delegate[0]; // this is the actual delegated, your directive
             directive.templateUrl = 'newTemplate.html'; // you change the directive template
        return $delegate;
    })
});

이 예제는 클릭 할 때 onClick 이벤트를 지시문 요소에 추가합니다.이 작업은 컴파일 단계에서 발생합니다.

angular.module('myApp').config(function ($provide) {
        $provide.decorator('myDirectiveTwoDirective', function ($delegate) {
            var directive = $delegate[0];
            var link = directive.link; // this is directive link phase
            directive.compile = function () { // change the compile of that directive
                return function (scope, element, attrs) {
                    link.apply(this, arguments); // apply this at the link phase
                    element.on('click', function(){ // when add an onclick that log hello when the directive is clicked.
                            console.log('hello!');
                    }); 
                };
            };
            return $delegate;
        });

    });

공급자와 서비스 모두 비슷한 접근 방식을 사용할 수 있습니다.

지침 상속 및 상호 운용성

Angular js 지시어는 중첩되거나 상호 운용 될 수 있습니다.

이 예에서 지시문 Adir은 Bdir이 Adir을 필요로하기 때문에 지시문 Bdir에 컨트롤러 $ scope를 노출합니다.

angular.module('myApp',[]).directive('Adir', function () {
        return {
            restrict: 'AE',
            controller: ['$scope', function ($scope) {
                    $scope.logFn = function (val) {
                            console.log(val);
                        }
                  }]
            }
    })

require : '^ Adir'을 설정해야합니다 (각진 문서를 보시고, 일부 버전은 ^ 문자가 필요하지 않습니다).

.directive('Bdir', function () {
        return {
            restrict: 'AE',
            require: '^Adir', // Bdir require Adir
            link: function (scope, elem, attr, Parent) { 
            // Parent is Adir but can be an array of required directives.
                elem.on('click', function ($event) {
                    Parent.logFn("Hello!"); // will log "Hello! at parent dir scope
                    scope.$apply(); // apply to parent scope.
                });
            }
        }
    }]);

다음과 같이 지시어를 중첩 할 수 있습니다.

<div a-dir><span b-dir></span></div>
<a-dir><b-dir></b-dir> </a-dir>

지시어가 HTML에 중첩되어 있지 않아도됩니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

AngularJS
사용자 지정 지시문

수색…

소개