AngularJS как на es5 задать геттер\сеттер у контроллера компоненты?

Question

[ksivasid]

Видел в статье на хабре как не юзать $scope в компонентах там пример кода но он на es6, как тоже самое сделать на 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
});

Я сделал но как то кривовато, видать полное понимание прототипов у меня не полное, вот хотел бы его закрепить.
Суть в том что я хочу повесть сеттер на свойство компоненты, а в сеттере добавлен дополнительный вызов функции контроллера, но просто так это не заводилось пока не указал заглушки:

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

Вот код всего компонента:

(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:

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

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

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

Геттеры-сеттеры в ES5 доступны для объектов:

var MyComponent() {
  _bindedValue: 'someValue',

  get bindedValue() {
      return this._bindedValue;
  }

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

Пример подробнее, можно применить и к функции.

Comments

[ksivasid]

это мне все понятно, но как я указал в коде, что если в прототипе не указаны заглушки, которые потом перетерет сам контроллер, то все падает

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          = {};

[Олег Драпеза]

ksivasid: dialogFormCtrl.prototype.showDialogForm доступен как this.showDialogForm у объекта showDialogForm (и его экземпляра, который создаст angular).

Поэтому, когда вы в сеттере, ссылаетесь на this.model и this.showDialogForm(value), они должны быть определены.

[Олег Драпеза]

ksivasid: посмотрел код внимательнее - возможно проблема в перезаписывании prototype объекта.

Проверьте, что значит this в геттере и сеттере.

[ksivasid]

Олег Драпеза: Значит то как я уже написал код с заглушками, единственное решение для es5 и более красиво не сделать ?

[Олег Драпеза]

ksivasid: вы не открывали ссылку, которую я вам отправил в оригинальном посте, вот пример-копипаст:

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;

  // age будет высчитывать возраст по birthday
  Object.defineProperty(this, "age", {
    get: function() {
      var todayYear = new Date().getFullYear();
      return todayYear - this.birthday.getFullYear();
    }
  });
}

вот с другого ресурса, defineProperty вынесен наружу:

function Vehicle (name) {
    this._name = name;
}

Object.defineProperty(Vehicle.prototype, 'name', {
    get: function () { return this._name; },
    set: function (value) { this._name = value }
});

[ksivasid]

Олег Драпеза:
Я так раньше пробовал но я указывал свойство не на прототип, указывал так и это не работало, как я понял так не верно:

Object.defineProperty(dialogFormCtrl, 'showForm', {
    get: function () {
      return this.model.showForm;
    },
    set: function (value) {
      this.model.showForm = value;
      this.showDialogForm(value);
    }
  });

И нужно указывать так:

Object.defineProperty(dialogFormCtrl.prototype, 'showForm', {
    get: function () {
      return this.model.showForm;
    },
    set: function (value) {
      this.model.showForm = value;
      this.showDialogForm(value);
    }
  });

Но это тоже не работает, ругается на отсутствие свойства, так же как и делать через прототип как делал я но не указав заглушки.
Ошибка:

angular.min.js:117 TypeError: Cannot set property 'showForm' of undefined
    at dialogFormCtrl.set (testOne.js:1791)
    at angular.min.js:82
    at r (angular.min.js:7)
    at ha (angular.min.js:81)
    at m (angular.min.js:65)
    at g (angular.min.js:58)
    at m (angular.min.js:66)
    at g (angular.min.js:58)
    at m (angular.min.js:66)
    at g (angular.min.js:58)

Но я никогда не пробовал указать внутри контроллера и сделав это оно заработало, и сам механизм понятен, но осталось не ясность, почему указав внутри контроллера работает а снаружи нет, можете пояснить этот момент?

Работает так:

function dialogFormCtrl(testsServiceOne, $mdDialog) {

  Object.defineProperty(this, 'showForm', {
    get: function () {
      return this.model.showForm;
    },
    set: function (value) {
      this.model.showForm = value;
      this.showDialogForm(value);
    }
  });

  /**
   * 
   */
}

[Олег Драпеза]

ksivasid: по какой-то причине теряется контекст this, внутри функции он в любом случае верный.

Какие свойства имеет this в варианте с ошибкой ' set property 'showForm' of undefined'?

[ksivasid]

Олег Драпеза:


вот бряка после которой падает ошибка.

[Олег Драпеза]

ksivasid: это очень странно, куда-то пропадает контекст, который в vm добавили. Могу только предположить, что дело в angular внедрении зависимостей и инициализации компонентов, но это не имеет смысла без доказательства(

[ksivasid]

Олег Драпеза: Спасибо за решение, буду пользоваться Object.defineProperty внутри контроллера, это куда лучше чем то что делал я через прототип и затыкая заглушки.