각도란JS 디렉티브?

각도란JS 디렉티브?

Angular를 읽는데 꽤 많은 시간을 할애했다.JS 매뉴얼과 몇 가지 튜토리얼이 있는데, 이 매뉴얼에 접근할 수 없다는 사실에 놀랐습니다.

Angular를 픽업하려는 다른 사람들에게도 유용할 수 있는 간단하고 대답할 수 있는 질문이 있습니다.JS:

각도란JS 디렉티브?

명령어에 대한 간단하고 정확한 정의가 어딘가에 있을 것입니다만, Angular는JS 웹 사이트에서는 다음과 같은 놀랍도록 쓸모없는 정의를 제공합니다.

홈페이지에서:

디렉티브는 AngularJS에서 사용할 수 있는 고유하고 강력한 기능입니다.디렉티브를 사용하면 응용 프로그램에 고유한 새로운 HTML 구문을 만들 수 있습니다.

개발자 매뉴얼:

디렉티브는 HTML에 새로운 기술을 가르치는 방법입니다.DOM 의 컴파일중에, HTML 에 대해서 디렉티브를 대조되어 실행됩니다.이를 통해 디렉티브는 동작을 등록하거나 DOM을 변환할 수 있습니다.

그리고 아이러니하게도 관객이 이미 그것이 무엇인지 알고 있는 것처럼 보이는 지시들에 대한 일련의 이야기들이 있다.

명확한 참조를 위해 다음 사항을 설명하는 지침의 정확한 정의를 제공할 수 있는 사람이 있습니까?

1. 개요(jQuery의 명확한 정의를 예로 참조)
2. 어떤 현실적인 문제와 상황에 대처하는 것이 목적입니까?
3. Angular의 MVC/MVW 미션에 어떻게 적합한지 또는 대체적으로 어떤 디자인 패턴을 구현하는지JS.

이게 뭐죠? (예를 들어 jQuery의 명확한 정의를 참조해 주세요.)

디렉티브는 기본적으로 Angular 컴파일러가 DOM에서 검출했을 때 실행되는 함수입니다^†.함수는 거의 모든 작업을 수행할 수 있기 때문에 지시문이 무엇인지 정의하는 것은 다소 어렵다고 생각합니다.각 디렉티브에는 이름(ng-repeat, 탭, make-up-your-own 등)이 있으며, 각 디렉티브는 코멘트 내의 요소, 속성, 클래스 등 사용처를 결정합니다.

^† 디렉티브에는 보통 (포스트)링크 기능만 있습니다.복잡한 디렉티브는 컴파일 함수, 프리링크 함수 및 포스트링크 함수를 가질 수 있습니다.

어떤 현실적인 문제와 상황에 대처하는 것을 의도하고 있습니까?

디렉티브가 할 수 있는 가장 강력한 것은 HTML을 확장하는 것입니다.확장은 응용 프로그램을 빌드하기 위한 도메인 고유 언어(DSL)입니다.예를 들어, 어플리케이션이 온라인 쇼핑 사이트를 실행하고 있는 경우 HTML을 확장하여 "쇼핑 카트", "쿠폰", "스페셜" 등의 지시어를 사용할 수 있습니다. "divs" 및 "span"(@WTK와 같이)보다는 "온라인 쇼핑" 도메인 내에서 사용하는 것이 더 자연스러운 단어나 객체 또는 개념에 관계없이 말입니다.

지시문은 HTML을 구성요소화할 수도 있습니다. HTML을 여러 개 재사용 가능한 구성요소로 그룹화합니다.많은 HTML을 끌어오기 위해 ng-include를 사용하고 있는 자신을 발견한다면, 이제 디렉티브로 리팩터링해야 할 때일 것이다.

angularjs의 MVC/MVW 미션에 적합한 설계 패턴은 무엇입니까?

디렉티브는, DOM 를 조작해, DOM 이벤트를 취득하는 장소입니다.이것이 디렉티브의 컴파일 기능과 링크 함수 모두 "element"를 인수로 받는 이유입니다.넌 할 수 있다.

• 지시문을 대체할 HTML(템플릿 등) 묶음을 정의합니다.
• 이벤트를 이 요소(또는 하위 요소)에 바인딩합니다.
• 클래스를 추가/삭제하다
• text() 값을 변경합니다.
• 같은 요소에 정의되어 있는 속성의 변경을 감시합니다(실제로 감시되는 것은 속성의 값입니다.이것은 스코프 속성이기 때문에 디렉티브는 「모델」의 변경을 감시합니다).
• 기타.

---

In HTML we have things like <a href="...">, <img src="...">, <br>, <table><tr><th>. How would you describe what a, href, img, src, br, table, tr, and th are? That's what a directive is.

각도 지령에 대한 매우 간단하고 초기 정의는 다음과 같습니다.

AngularJS 디렉티브(ng-directive)는 Angular가 HTML을 확장하기 위해 사용하는 접두사 ng(ng-model, ng-app, ng-repeat, ng-bind)를 가진 HTML 속성입니다.(발신: W3schools angular tutorial)

예를 들어 다음과 같습니다.

ng-app 디렉티브는 Angular를 정의합니다.JS 어플리케이션

ng-model 디렉티브는 HTML 컨트롤(입력, 선택, 텍스트 영역)의 값을 애플리케이션 데이터에 바인드합니다.

ng-bind 디렉티브는 애플리케이션 데이터를 HTML 뷰에 바인드합니다.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

이 튜토리얼을 체크해 주세요.적어도 Angular에 대한 최고의 소개 중 하나였습니다.보다 완전한 접근방식은 @mark-rajcok이 이전에 말한 모든 것입니다.

설명서를 보면 지시문은 객체 및 동작을 작성하기 위해 angularjs 파스를 작성할 수 있는 구조입니다.즉, 임의의 노드, 의사 자바스크립트 및 플레이스 홀더를 혼합하여 데이터에 대해 위젯(컴포넌트)의 구조, 동작 및 데이터 피드 방법에 대한 의도를 표현하는 템플릿입니다.그런 다음 Angularjs는 이러한 명령어에 대해 실행되며, 이를 작동 중인 html/javascript 코드로 변환합니다.

적절한 의미론을 사용하여 보다 복잡한 컴포넌트(위젯)를 구축할 수 있도록 지시문이 있습니다.디렉티브의 angularjs의 예를 봐 주세요.탭 페인을 정의하고 있습니다(일반 HTML에서는 물론 유효하지 않습니다).이것은 div나 span과 같은 구조를 작성하는 것보다 직관적입니다.그 후 탭 페인과 같이 스타일링 됩니다.

각진 상태JS 디렉티브는 속성(제한-A), 요소 이름(제한-E), 주석(제한-M) 또는 CSS 클래스(제한-C)와 같은 HTML DOM 요소에 대한 html re 마커입니다.JS의 HTML 컴파일러($compile)는 해당 DOM 요소에 대해 지정된 동작을 수행하거나 DOM 요소와 그 자식 요소를 변환합니다.예를 들어 ng-bind, ng-hide/show 등이 있습니다.

홈페이지는 이에 대해 매우 명확합니다.마지막 섹션에서 탭 위로 마우스를 이동하면:

커스텀으로 HTML의 어휘를 확장했습니다.tabs요소.그tabs탭 렌더링에 필요한 복잡한 HTML 구조와 동작을 추상화합니다.그 결과 보기 가독성이 향상되고 구문을 쉽게 재사용할 수 있게 되었습니다."

다음 탭에서 다음을 수행합니다.

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

따라서 html 요소를 발명할 수 있습니다.tabs그리고 각이 그 요소들의 렌더링을 처리하도록 한다.

언급URL : https://stackoverflow.com/questions/13875466/what-is-an-angularjs-directive