Как при добавлении строки изменить атрибуты в DOM?

Question

[Кирилл Горлов]

Есть табличка с пользователями.
Есть кнопочка "добавить"

Как при добавлении новой строки включить in-place редактирование данных для нового элемента, не задевая ранее добавленные, и после прохождения валидации запретить редактирование поля?
ontentEditable="false"

В контроллере нужно только добавить в массив еще один объект чтобы он был отображен на странице, но мне надо до определенного момента иметь возможность изменять данные о пользователе!

Иными словами Как можно из Контроллера манипулировать атрибутами тега в HTML при добавлении его в DOM?

Answer 1

[Сергей Протько]

Напишите директиву. Это единственный правильный путь.

Псевдокод:

function editOnceDirective(){
    return {
         require: 'ngModel',
         link: function (scope, el, attr, ctrl) {
              // включаем редактирование если у нас пустое значение
              // еще стоит проверять убрали ли мы фокус с поля и все такое
              scope.$watch(function () { return ctrl.$invalid; }, function (isInvalid) {
                   if (!isBoolean(isInvalid)) return;

                   el.attr('contenteditable', isInvalid);
              }

              // вешаем листенеры на элемент что бы обновлять значение
         }
    }
}

Читать про ngModelController, кастомные инпуты и т.д.

Comments

[Кирилл Горлов]

так с этим разобрался
- в директивах все взаимодействия с элементами описываются.

Теперь - как мне заставить директиву отправить запрос на обновление Бэк-энду?
или это в контроллере прописывается?

[Кирилл Горлов]

так сделал:
создал в контроллере функцию test
и из директивы вызвал scope.test(viewValue)
вроде нормально - остается в контроллере сделать http запрос и обновить данные + валидация

[Сергей Протько]

Кирилл Горлов: можете колбэк сделать, тип:

<div edit-once on-done="ctrl.saveEntry(entry)"></div>

а в директиве через изоляцию скоупа пробросить это как колбэк (смотреть документацию по директивам, а именно изолированный скоуп и символ амперсанта (&))

[Сергей Протько]

Кирилл Горлов: по сути это то что вы и делаете, только ваш вариант (если я правильно понимаю) делает неявную зависимость директивы от места применения.

[Кирилл Горлов]

Сергей Протько: я только начал изучать Ангуляр и ищу как он вообще работает с сервером.
Мне то надо сделать табличку пользователей, в которую можно добавить юзера, отвалидировать поля - чтоб юзернейм не повторялся, и пароль чтобы только 1 раз можно было отредактировать.

[Сергей Протько]

Кирилл Горлов: обычно то что вы описываете целиком делается на сервере, а в ангуляре рекомендую завести привычку делать сервисы-репозитории которые работают с сервером и только они знают как чего куда посылать.

[Кирилл Горлов]

Сергей Протько: Ангуляр у меня шлет REST запросы на PHP - остальное в браузере проверяется. Валидация, добавление, редактирование (внешнее в браузере), отправка на сохранение, пре-валидация, закрытие поля "login" чтоб менять нельзя было - после успешного создания записи в базе на сервере.

[Сергей Протько]

Кирилл Горлов: не, я к тому что при таком подходе это надо проверять дважды, на клиенте (для лучшего UX) и на сервере (что бы недай боже какая ... послала невалидные данные).

В любом случае это уже не столь важно в контексте вопроса.

[Кирилл Горлов]

Сергей Протько: двойная проверка - практически стандартная ситуация. В любом случае чтобы что-то запихнуть в базу сначала проверит Бэк, а на Фронте там уже по усмотрению всегда.

Answer 2

[Тимофей]

Такого в ангуляре нет, можно только сделать как-то так:

<div ng-hide='editMode'>{{content}}</div>
<div ng-if='editMode' contenteditable>{{content}}</div>