27

私は 1.5 の角度コンポーネントを使用して速度を上げることに取り組んでいます。私は todd Motto のビデオをフォローして、angular のドキュメントhttps://docs.angularjs.org/guide/componentとともにコンポーネントを使い始めました 。

この時点で、コントローラーを使用するディレクティブの代わりにコンポーネントが使用されているように見えますが、1.5 のコードでは、DOM 操作にディレクティブを引き続き使用します。

コンポーネントコントローラー内の $element、$attrs の目的は何ですか? これらは操作できるようです。これは、ドキュメントのプランカーへのリンクです。彼らが $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>
    `
  })

DOM を操作していない場合、$element はどのように使用されますか?

4

2 に答える 2

24

それは素晴らしい質問です。そして、私はそれに対する簡単な答えを持っています。

コンポーネントがディレクティブの構文糖衣であるという理由だけで、それらはコンポーネントで行われます。

angularがコンポーネントを追加する前は、ディレクティブにある種のコンポーネント構文を使用していました。これは、私たちのプロジェクトには2種類のディレクティブがあり、1つはDOM操作を担当し、2つ目は操作してはならないテンプレートを含むディレクティブです。ドム。コンポーネントが追加された後、名前を変更しただけです。

したがってComponent、次のような新しいエンティティとして作成された単純なディレクティブにすぎません。

  1. 常にテンプレートを持っています
  2. スコープは常に分離されています
  3. 制限は常に要素です

アンギュラーソースでさらに多くの答えを見つけることができると思いますが、これらのエンティティを混在させないことをお勧めします.コンポーネント内でDOMを操作する必要がある場合は、内部でディレクティブを使用してください.

于 2016-09-19T05:18:22.097 に答える
22

Angular コンポーネント ライフサイクル フックにより、 $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.html)

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

于 2017-03-15T18:09:28.930 に答える