AngularJS how to set a getter/setter for a component controller in es5?

Question

Angular

I saw in an article on habré how not to use $scope in components there is an example of code, but it is on es6, how to do the same on es5?

class MyComponent {
    get bindedValue() {
        return this.$value;
    }

    set bindedValue(value) {
       this.$value = value;
       // а теперь вызовем метод, который должен обновить что-то
       // вместо того, что бы вешать неявный ватчер
       this.makeSomethingWithNewValue();
    }
}

angular.module('app').component('myComponent', {
   bindings: {
       "bindedValue": "="
   },
   template: `<div>Какой-то шаблон</div>`,
   controller: MyComponent
});

I did it, but it’s somehow crooked, I don’t have a complete understanding of the prototypes, so I would like to fix it.
The bottom line is that I want to set the setter to the property of the component, and in the setter an additional call to the controller function was added, but it just didn’t start until I specified the stubs:

dialogFormCtrl.prototype.showDialogForm = function () {};
  dialogFormCtrl.prototype.model          = {};

Here is the code for the entire component:

(function (angular) {
  'use strict';

  angular.module('FooBarBaz')
    .component('dialogForm', {
      bindings  : {
        showForm  : '=',
        idTest    : '=',
        callbackFn: '&',
      },
      template  : template,
      controller: dialogFormCtrl
    });

  function template() {
    return `
        *
        *
        *
        `;
  }

  dialogFormCtrl.$inject = ['testsServiceOne', '$mdDialog'];

  function dialogFormCtrl(testsServiceOne, $mdDialog) {
    var vm = this;

    vm.showDialogForm = showDialogForm;
    vm.offDialog      = offDialog;
    vm.addConstant    = addConstant;
    vm.deleteConstant = deleteConstant;
    vm.saveFormDialog = saveFormDialog;

    vm.model = {
      showForm: false,
      loadTest: true,
      test    : {}
    };

    activate();

    ////////////////////////////////////////////////

    function activate() {

    }

    function showDialogForm(value) {
      /**
       *
       */
    }

    function offDialog() {
      $mdDialog.cancel();
    }

    function getTestJson(id) {
      return testsServiceOne.getTestForm(id);
    }

    function addConstant(server) {
      /**
       *
       */
    }

    function deleteConstant(index, server) {
      /**
       *
       */
    }

    function getDateTimeShtamp(time) {
      return testsServiceOne.getDateTimeShtamp(time);
    }

    function saveFormDialog() {
      /**
       *
       */
    }
  }

  /**
   * Тут полная дичь, но она работает.
   * Как верно указать назначить геттер/сеттер ?
   *
   */
  dialogFormCtrl.prototype = {
    constructor: dialogFormCtrl,
    get showForm() {
      return this.model.showForm;
    },
    set showForm(value) {
      this.model.showForm = value;
      this.showDialogForm(value);
    },
  };
  /**
   * Именно нижние две строчки у меня вызывают непонимание, если их не указать то все падает, так как не находит функцию "showDialogForm"
   */
  dialogFormCtrl.prototype.showDialogForm = function () {};
  dialogFormCtrl.prototype.model          = {};

})(window.angular);

Answer 1

ES5 class example:

function MyComponent() {
  this._bindedValue = 'someValue';
}

MyComponent.prototype.getBindedValue = function() {
  return this._bindedValue;
}

MyComponent.prototype.setBindedValue = function(value) {
  this._bindedValue = value;
  this.makeSomethingWithNewValue();
}

Getter-setters in ES5 are available for objects:

var MyComponent() {
  _bindedValue: 'someValue',

  get bindedValue() {
      return this._bindedValue;
  }

  set bindedValue(value) {
     this._bindedValue = value;
     this.makeSomethingWithNewValue();
  }
}

The example is more detailed , can be applied to the function.