AngularJSのBinding（=,<）の使い方について書いてみた

バインディング

AngularJSのバインディングの種類は色々ありますが
今回はバインディングの基本である"=","<"について書いてみたいと思います。

=について

"="はAngular1.5までの特徴である「双方向バインディング」を実現してくれます。
以下のコードはコントローラーからコンポーネントに値を渡してコンポーネントで渡された値を変更しています。

equalController.js

this.variable1 = "hogehoge";
this.variable2 = "hogehoge";

equalController.html

<equal-component param1="this.variable1" param2="this.variable2"></equal-component>
-------------------------------
コントローラー{{this.variable1}}
コントローラー{{this.variable2}}

equalComponent.js

angular.module('myApp')
  .component('equalComponent', equalComponent);

class equalComponentClass {
  constructor() {
    this.param2 = "fugafuga" //ここでコントローラーから渡された値を変更
  }
}

equalComponentClass.$inject = [];

var equalComponent = {
  controller: equalComponentClass,
  templateUrl: 'component/equalComponent.html',
  binding: {
    param1: '=', //bindingの種類を指定
    param2: '=' //bindingの種類を指定
  }
}

equalComponent.html

コンポーネント{{this.param1}}
コンポーネント{{this.param2}}

上記のようなコードを実装し、コントローラー側のhtmlを表示すると

コンポーネントhogehoge
コンポーネントfugafuga
-------------------------------
コントローラーhogehoge
コントローラーfugafuga

このようにコンポーネントにコントローラーの値が渡され
コントローラーにコンポーネントで変更された値が反映されています。

<について

"<"は双方向バインディングではなく、片方向バインディング（親→子）となります。
考え方は"="とほとんど同じ考え方で、呼び出し元から呼び出し先の一方向しか値の変更をしないです。

"<"があるなら呼び出し先から呼び出し元の">"もあるのではないかと思いますが、調べて見た所
サポートされていなかったので注意が必要です。（私は今まで使おうとした場面に遭遇した事はないです。）