Angular 1.5 구성 요소 대 이전 지시문-링크 함수는 어디에 있습니까?

Angular 1.5 구성 요소 대 이전 지시문-링크 함수는 어디에 있습니까?

---

저는 Angular 1.5의 새로운 도우미에 대한 이 멋진 최근 기사를 읽고 .component()있었는데, 이는 모든 사람이 결국 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 Motto가 구성 요소 및 지시문에 대해 (지금까지) 가장 좋은 논의에서 말한 내용을 실제로 다시 표현한 것입니다.

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-paradigm-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 클래스에 의해 트리거되는 지시문을 원할 때 우선 순위, 터미널, 다중 요소와 같은 고급 지시문 정의 옵션이 필요한 경우 컴파일 및 링크 기능을 사용할 수 없기 때문입니다. , 요소가 아닌

---

업데이트 (2017 년 8 월 22 일부터) : $ inject는 AngularJS에서이 작업을 수행하는 데 권장되는 방법입니다. Styleguide 읽기 : Styleguide 링크 및 AngularJS 문서 : AngularJS 문서

링크 함수로 지시문을 생성하는 대신 구성 요소에서 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();
    });
  }

---

Ok, so it appears that controller is the right place for it now, since it is the only possible one. Also we can't use a replace option in the a component helper.

---

You can use $postLink() function which is in newest angular.

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

Similar to the post-link function this hook can be used to set up DOM event handlers and do direct DOM manipulation.

---

According to current Angular2 documentation (see https://github.com/angular/angular/blob/master/modules/angular2/docs/core/02_directives.md) there will still be directives in Angular2. So basically you will be able to use both @Directive or @Component, where:

• Directives are useful for encapsulating behavior.
• Component is a directive which uses shadow DOM to create encapsulate visual behavior. Components are typically used to create UI widgets or to break up the application into smaller components.

So According to this, if you need DOM manipulation you will need to use @Directive, therefore Angular.directive in Angular 1.x. Event bindings can be done using the host properties. Concerning DOM manipulation per se there is still missing documentation (e.g. https://github.com/angular/angular/blob/master/modules/angular2/docs/core/09_compilation.md or https://github.com/angular/angular/blob/master/modules/angular2/docs/core/08_lifecycle.md) but you can look for Lifecycle as suggested here https://stackoverflow.com/a/32062065.

As a short answer, with Angular 1.5+, continue using angular.directive if you have DOM access, otherwise encapsulate into angular.component. Also try to reduce as much as possible the use of $scope for non-dom event and prefer RxJS for that see https://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