новый метод для свойства editable-text в угловых js 1.4.9

Question

Мне нужно получить динамическое значение для свойства editable-text. Но это выдаст эту ошибку TypeError: valueGetter.assign is not a function

Моя попытка, как показано ниже.

<div id="seat_number" class="pr-editable-field-container kpp-editable-content"
  ng-class="{'pr-editable-field-opened': xEditable['seat_number'] }">
      <span class="kp-inline-edit" editable-text="getSeatNumber(user.id)"
           onshow="onShow('seat_number')" onhide="onHide('seat_number')"
           onbeforesave="create($data, 'seat_number', 'seat number', user.id, user.tickets)">
       {{getSeatNumber(user.id)}}
         <span class="edit-icon"></span>
       </span>
</div>

Когда я его редактирую и сохраняю выше, пришла ошибка, и как это сделать? Можно ли иметь методы для свойства editable-text. Я назначил переменную и попытался получить значение. Тогда также эта ошибка была в консоли. И при попытке сохранить с пустым значением он будет сохранен как неопределенный.

Answer 1

edited-text использование двусторонней привязки.А в вашем случае вы можете попробовать ng-model-options, чтобы определить функцию, которая получает и установить значение. Подробнее ..

В моем примере это функция getSomeValue.

Но директива edited-text не предоставляет свойства для параметров ng-model-options.И по этой причине использование функции для edited-text может быть неудачным.

angular.module('app', [])
.directive('appDir', appDir);

angular.bootstrap(document.getElementById('root'), ['app']);

function appDir() {
  return {
    template: '<input ng-model="getSomeValue" ng-model-options="{ getterSetter: true }"><span ng-bind="_someValue"></span>',
    link: function link($scope) {
      $scope._someValue = '';
      $scope.getSomeValue = function getSomeValue(value) {
        if (typeof value === 'undefined') {
          // getter
          return $scope._someValue;
        } else {
          // setter
          $scope._someValue = value;
        }
      }
    }
  }
}


describe('app', () => {
  let scope;
  let compile;
  let validHTML;

  function create() {
    var elem, compiledElem;
    elem = angular.element(validHTML);
    compiledElem = compile(elem)(scope);
    scope.$digest();

    return compiledElem;
  }
  beforeEach(module("app"));

  beforeEach(
    inject(function($compile, $rootScope) {
      scope = $rootScope.$new();
      compile = $compile;
    })
  );
  
  it('appDir should be defined', () => {
    validHTML = '<app-dir></app-dir>';
    const element = create();
    expect(element).toBeDefined();
    expect(element.find('input').length).toEqual(1);
  });
  
   it('appDir set value', () => {
    validHTML = '<app-dir></app-dir>';
    const element = create();
    const input = element.find('input')[0];
    const value = 'Example value';
    input.value = value;
    angular.element(input).triggerHandler('change');
    expect(element.scope()._someValue).toEqual('Example value');
  
  });
});

#root {
  height: 50px;
}
span {
  margin-left: 2rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.1.0/jasmine.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/3.1.0/jasmine.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/3.1.0/jasmine-html.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/3.1.0/boot.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.1.0/jasmine.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-mocks.js"></script>
<div id="root">
  <app-dir></app-dir>
</div>