AngularJS + ES6ならbindToControllerとcontrollerAsを使ってクールにカスタムディレクティブを作ろう

従来のポピュラーな作り方

angular.module('SampleApp', [])
  .directive('customDirective', function () {
    return {
      require: ['ngModel'],
      scope: {
        sampleText: '=ngModel'
      },
      template: '<input type="text" ng-model="sampleText">' +
        '<div>nanka</div>',
      link: function (scope, element, attrs) {
        var changeSampleText = function () {
          scope.sampleText = 'changed';
        }

        changeSampleText();
      }
    }
  })
;

ES6でクールな作り方

class CustomDirective {
  require = ['ngModel'];
  scope = {};
  bindToController = {
    sampleText: '=ngModel'
  };
  template = `
    <input type="text" ng-model="ctrl.sampleText">
    <div>nanka</div>
  `;
  controller = CustomDirectiveController;
  controllerAs = 'ctrl';
}

class CustomDirectiveController {
  sampleText;

  constructor () {
    this.changeSampleText();
  }

  changeSampleText () {
    this.sampleText = 'changed';
  }
}

angular.module('SampleApp', [])
  .directive('customDirective', () => new CustomDirective())
;

ごめんなさい

もっとちゃんと説明したいけどわかる人は「あ、素敵」ってなると思ったのでここまで…
時間と余裕があればもう少しマシなコンテンツを用意します。

ありがとうございました！