각도가 있는 컴포넌트 컨트롤러에서의 $element 및 $attribut의 목적JS 컴포넌트 1.5

각도가 있는 컴포넌트 컨트롤러에서의 $element 및 $attribut의 목적JS 컴포넌트 1.5

저는 1.5개의 각도 부품으로 속도를 내는 작업을 하고 있습니다.저는 todd Mooto의 비디오를 보고 angular의 설명서 https://docs.angularjs.org/guide/component와 함께 컴포넌트에 대해 알아봅니다.

이 시점에서는 컴포넌트가 컨트롤러를 사용하는 디렉티브를 대신하고 있는 것처럼 보이지만, 1.5 코드에서는 여전히 돔 조작에 디렉티브를 사용하고 있습니다.

컴포넌트 컨트롤러 내부의 $element, $attrs의 목적은 무엇입니까?이것들은 조작이 가능한 것 같습니다.여기 문서에서 plunker로 연결되는 링크가 있습니다.$element를 사용하지 않는 것은 알지만, 제가 읽고 있는 것은 그 예입니다.http://plnkr.co/edit/Ycjh1mb2IUuUAK4arUxe?p=preview

하지만 이런 암호로는...

 angular
  .module('app', [])
  .component('parentComponent', {
    transclude: true,
    template: `
      <div ng-transclude></div>
    `,
    controller: function () {
      this.foo = function () {
        return 'Foo from parent!';
      };
      this.statement = function() {
        return "Little comes from this code";
      }
    }
  })
  .component('childComponent', {
    require: {
      parent: '^parentComponent'
    },
    controller: function () {

      this.$onInit = function () {
        this.state = this.parent.foo();
        this.notice = this.parent.statement();
      };
    },
    template: `
      <div>
        Component! {{ $ctrl.state }}
        More component {{$ctrl.notice}}
      </div>
    `
  })

돔을 조작하지 않는다면 $element가 무슨 소용입니까?

좋은 질문입니다.그리고 그에 대한 간단한 해답이 있습니다.

구성 요소가 명령어 주위에 구문설탕이기 때문에 구성 요소에서 발생합니다.

컴포넌트를 각도로 추가하기 전에는 명령어에 일종의 컴포넌트 구문을 사용하고 있었습니다.이것은 규칙과 같았습니다.프로젝트에서는 2종류의 명령어가 있습니다.하나는 DOM 조작을 담당합니다.두 번째는 DOM 조작을 해서는 안 되는 템플릿을 사용한 명령어느 쪽이든 DOM 조작을 담당합니다.컴포넌트를 추가한 후 이름만 변경했습니다.

그렇게Component는, 다음의 새로운 엔티티로서 작성된 단순한 디렉티브에 지나지 않습니다.

1. 항상 템플릿 있음
2. 스코프는 항상 격리되어 있습니다.
3. 제한은 항상 요소입니다.

각도 소스에서는 더 많은 답을 찾을 수 있다고 생각합니다만, 이러한 엔티티를 혼재시키지 말고, 컴포넌트 내부에서 DOM을 조작할 필요가 있는 경우는, inside의 지시어를 사용해 주세요.

각진 컴포넌트 라이프 사이클 후크를 통해 $element 서비스를 사용하여 컴포넌트 컨트롤러 내부에서 DOM 조작 가능

var myApp = angular.module('myApp');
myApp.controller('mySelectionCtrl', ['$scope','$element', MySelectionCtrl]);

myApp.component('mySection', {
    controller: 'mySelectionCtrl',
    controllerAs: 'vm',
    templateUrl:'./component/view/section.html',
    transclude : true
});

function MySelectionCtrl($scope, $element) {
    this.$postLink = function () {
        //add event listener to an element
        $element.on('click', cb);
        $element.on('keypress', cb);

        //also we can apply jqLite dom manipulation operation on element
        angular.forEach($element.find('div'), function(elem){console.log(elem)})

    };

    function cb(event) {
        console.log('Call back fn',event.target);
    }
}

컴포넌트를 html로 선언하다

<my-section>
<div class="div1">
    div 1
    <div>
        div 1.1
    </div>
</div>
<div class="div2">
    div 1
</div>

컴포넌트의 부분 템플릿 // / component / view / section . section . scomponent )

<div>
<div class="section-class1">
    div section 1
    <div>
        div section 1.1
    </div>
</div>
<div class="section-class1">
    div section 1
</div>

언급URL : https://stackoverflow.com/questions/35485591/purpose-of-element-and-attrs-in-component-controllers-with-angularjs-componen