각도 1.5 구성 요소와 기존 지침 - 링크 기능은 어디에 있습니까?

각도 1.5 구성 요소와 기존 지침 - 링크 기능은 어디에 있습니까?

최근에 뉴에 대한 기사를 읽었는데.component()각도 1.5 우 angular angular angular angular angular angular angular angular angular angular angular 。 앵귤러 2로 하겠습니다.모든 것이 단순해 보이지만 컴포넌트 내부에서 DOM 조작에 대한 정보를 찾을 수 없었습니다.

게 요.template속성. 가 될 수 , 함수가 될 수 , 받아들여질 수 있습니다.$element ★★★★★★★★★★★★★★★★★」$attrs논쟁들.아직도 그게 대체품인지 잘 모르겠어요link 것 아닌 것 같아요.

2/2/16 편집: 1.5 매뉴얼에서는 컴포넌트에 대해 설명합니다.https://docs.angularjs.org/guide/component

---

일부 정보에 근거한 생각(아래 링크) : 링크:

• 컴포넌트는 디렉티브의 대체품이 아닙니다.컴포넌트는 템플릿을 사용하여 컨트롤러를 구성하는 특수한 유형의 지시어입니다.

• 컴포넌트에는 링크 기능이 없으며 컨트롤러는 아직 DOM 조작을 처리할 수 없습니다.

• DOM 조작이 필요한 경우 컴포넌트는 링크 함수에 해당 DOM 조작을 포함하는 다른 디렉티브를 사용할 수 있습니다.

이 문제를 해결하는 데 시간이 좀 걸렸지만, 어느 정도 이해가 되었습니다. 컴포넌트는 디렉티브이지만 모든 디렉티브가 컴포넌트는 아니거나 컴포넌트일 필요는 없습니다.

링크 함수에 대한 질문은 자연스러운 문제이거나 컴포넌트가 디렉티브를 대체하고 있다고 생각했을 때 그랬습니다.왜일까요?DOM 조작을 디렉티브의 링크 함수 안에 넣는 방법을 배웠습니다.「DOM 를 수정하는 디렉티브는, 통상, 링크 옵션을 사용해 DOM 청취자를 등록해, DOM 를 갱신합니다」(https://docs.angularjs.org/guide/directive).

이 전제(컴포넌트가 디렉티브를 대체하는 것)를 실행하고 있는 경우, Angular 문서는 질문에 대답하지 않습니다.컴포넌트는 디렉티브 문서가 아닌 $compileProvider 문서에 설명되어 있습니다.

배경 판독

위에서 언급한 내용은 Todd Mooto가 (지금까지) 컴포넌트 및 지침에 대해 논의한 내용 중 가장 적합한 내용을 바꿔 표현한 것입니다.

https://www.reddit.com/r/angularjs/comments/3taxjq/angular_15_is_set_to_introduce_the_component/

그 코멘트를 좀 더 일반적인 기사로 끌어내는 것이 유용할 수 있다.

컴포넌트에 관한 대부분의 기사에는 링크 함수가 기재되어 있지 않습니다(이것이 우수한 기사가 아님을 의미하지 않습니다).

https://toddmotto.com/exploring-the-angular-1-5-component-method/

https://medium.com/@tomastrajan/component-cf32e94ba78b#.vrbo1xso0

https://www.airpair.com/angularjs/posts/component-based-angularjs-directives

또는 링크 함수가 언급될 경우 괄호 안에 다음과 같이 표시됩니다.

http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html

어떤 기사에서는 컴포넌트가 "링크 기능 대신 컨트롤러를 사용한다"고 되어 있습니다.그러나 컨트롤러가 링크 기능을 대신하는 것은 아닙니다.

이를 통해 웹 컴포넌트를 사용하거나 Angular 2의 애플리케이션 아키텍처를 사용하는 것과 유사한 방식으로 앱을 쉽게 작성할 수 있습니다.

컴포넌트의 장점:

플레인 디렉티브보다 심플한 구성은 적절한 디폴트를 촉진하고 컴포넌트 기반 아키텍처에 최적화된 베스트 프랙티스를 통해 컴포넌트 디렉티브를 작성함으로써 Angular 2로의 업그레이드가 용이해집니다.

컴포넌트를 사용하지 않는 경우:

DOM 조작에 의존하는 디렉티브의 경우 컴파일 및 링크 기능은 요소가 아닌 속성 또는 CSS 클래스에 의해 트리거되는 디렉티브를 필요로 할 때 priority, terminal, multi-element 등의 고급 디렉티브 정의 옵션을 사용할 수 없기 때문에 이벤트청취자 추가 등

갱신(2017년 8월 22일 이후):$inject는 AngularJS에서 이를 수행하는 데 권장되는 방법입니다.스타일 가이드 읽기:스타일가이드 링크 및 각도JS 문서: 각도JS 문서

링크 함수로 디렉티브를 작성하는 대신 컴포넌트에서 DOM 바인딩을 사용하는 경우 컨트롤러 함수에 필요한 '$element' 또는 기타 서비스를 삽입할 수 있습니다.

app.component('pickerField', {
    controller: PickerField,
    template: '<span>Your template goes here</span>'
  });

  PickerField.$inject = ['$element'];

  function PickerField(element) {
    var self = this;
    self.model = self.node.model;
    self.open = function() {
      console.log('smth happens here');
    };
    element.bind('click', function(e) {
      console.log('clicked from component', e);
      self.open();
    });
  }

한 것 . 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, replace옵션을 선택합니다.

최신 각도의 $postLink() 함수를 사용할 수 있습니다.

https://docs.angularjs.org/guide/component

링크 후 기능과 마찬가지로 이 후크는 DOM 이벤트 핸들러를 설정하고 직접 DOM 조작을 수행하는 데 사용할 수 있습니다.

현재 Angular2 문서에 따르면(https://github.com/angular/angular/blob/master/modules/angular2/docs/core/02_directives.md) 참조) Angular2에는 여전히 지침이 있습니다.따라서 기본적으로 @Directive 또는 @Component를 모두 사용할 수 있습니다.

• 디렉티브는 동작을 캡슐화하는 데 도움이 됩니다.
• 컴포넌트는 섀도 DOM을 사용하여 캡슐화된 시각적 동작을 만드는 지시어입니다.컴포넌트는 일반적으로 UI 위젯을 작성하거나 애플리케이션을 더 작은 컴포넌트로 분할하는 데 사용됩니다.

따라서 DOM 조작이 필요한 경우 @Directive를 사용해야 합니다.따라서 Angular 1.x에서는 Angular.directive를 사용합니다.이벤트 바인딩은 다음 명령을 사용하여 실행할 수 있습니다.host특성.DOM 조작 자체에 대해서는, 아직 문서(https://github.com/angular/angular/blob/master/modules/angular2/docs/core/09_compilation.md 또는 https://github.com/angular/angular/blob/master/modules/angular2/docs/core/08_lifecycle.md) 등)가 누락되어 있습니다만, 다음의 문서를 참조해 주세요.Lifecyclehttps://stackoverflow.com/a/32062065 를 참조해 주세요.

간단한 답변으로 Angular 1.5+를 사용하면angular.directiveDOM 액세스권이 있는 경우는, 그 이외의 경우는, 로 캡슐화해 주세요.angular.component. 또한 가능한 한 사용을 줄이도록 노력하십시오.$scopehttps://medium.com/front-end-developers/managing-state-in-angular-2-using-rxjs-b849d6bbd5a5 #.obgb6dl6n을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/33709062/angular-1-5-component-vs-old-directive-where-is-a-link-function