web-dev-qa-db-ja.com

angularコンポーネントで 'require'を使用する

ドキュメント （具体的には、ディレクティブとコンポーネントを比較するテーブル）によれば、angularコンポーネントは他のディレクティブの要求を許可します（またはコンポーネントのみですか？）。しかし、コンポーネントは ソース は、ドキュメントとは反対に、コンポーネントの作成時に 'require'を使用できないことを示唆しているようです。

javascriptangularjsangular-directive
14
Maciej Gurban

引用元は古くなっています。 1.5.0の時点では、コンポーネントコントローラー 必須 他のコンポーネントで（同じことがディレクティブにも当てはまります）。

ガイドの例 コンポーネントとディレクティブがどのように相互作用するかを示しています 1.5でlinkの助けなし。

require objectとbindToController を一緒に使用すると、必要なコントローラーインスタンスが現在のコントローラーにプロパティとして割り当てられます。

これはディレクティブのリンク中に発生するため、必要なコントローラーはコントローラーコンストラクターで使用できないため、 $onInitマジックメソッド があります。存在する場合、 必要なコントローラーを追加した直後に実行されます にthis。

どちらも

app.directive('someDirective', function () {
  return {
    scope: {},
    bindToController: {},
    controllerAs: 'someDirective',
    require: {
      anotherDirective: '^anotherDirective'
    },
    controller: function ($scope) {
      console.log("You don't see me", this.anotherDirective);

      this.$onInit = function () {
        console.log("Now you do", this.anotherDirective);
      };
    }
  }
});

そして

app.component('someComponent', {
  controllerAs: 'someComponent',
  require: {
    anotherDirective: '^anotherDirective'
  },
  controller: function ($scope) {
    console.log("You don't see me", this.anotherDirective);

    this.$onInit = function () {
      console.log("Now you do", this.anotherDirective);
    };
  }
});

宣言スタイルは内部で同等であり、1.5で互換的に使用でき、componentは簡潔なものです。

18
Estus Flask