@ksivasid

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

Видел в статье на хабре как не юзать $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);
  • Вопрос задан
  • 384 просмотра
Решения вопроса 1
@SuperOleg39ru
Front-end разработчик
Пример класса на 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();
  }
}


Пример подробнее, можно применить и к функции.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы