Добавить класс к родительскому элементу из директивы

Question

Я пытаюсь добавить класс has-error в div (родительский элемент ввода), но я не могу получить доступ к name ввода в ветке, потому что name исходит от php, и он там недоступен,поэтому я не могу использовать атрибут ng-class.

У меня есть директива, связанная с этим входом, и она может определить, является ли ngModelCtrl.$invalid истиной или ложью, и я пытаюсь добавить класс из этого.

Входная ветвь:

<input type="text" ng-model="integerInputValue" integer-input 
       {{ block('widget_attributes') }}
       {% if value is not empty %}value="{{ value }}" {% endif %} />

Директива:

(...)
      link: function (scope, element, attrs, ngModelCtrl) {
        // Workaround so that we don't lose the value.
        scope.integerInputValue = attrs.value;

        attrs.$set('ngPattern', '/^-?[0-9]+$/');

        function fromUser (text) {
          if (ngModelCtrl.$invalid) {
            angular.element(element).parent().addClass('has-error');
          } else if (ngModelCtrl.$valid) {
            angular.element(element).parent().removeClass('has-error');
          }
(...)

Я пытался определить, является ли ngModelCtrl.$invalid истинным или ложным внутри функции fromUser, котораяобнаруживает каждый введенный символ и оттуда добавляет или удаляет класс.У меня также есть ng-pattern, который допускает только [0-9] и «-» в качестве первого символа.

Этот тип работает, потому что класс добавляется и удаляется, но, например:

50- не получает класс, 50-- делает и при удалении, 50 все еще имеет класс, а 5 не имеет.

Я предполагаю, что будет лучшеспособ добавления класса к родителю.

Answer 1

Если я проверяю вход, он имеет имя name="wizard_page_type[blocks][0][answers][0][value]"

Чтобы использовать подобное имя в ng-class, используйте метод доступа к скобкам:

<form name='form1'>
    <input name="wizard_page_type[blocks][0][value]"
           ng-model="kk" required >
</form>

<div ng-class="{'has-error': form1['wizard_page_type[blocks][0][value]'].$invalid}">
</div>

Лучший способ для ngModelController работать с формами - это иметь разумные имена для входных данных. ngModelController использует это имя при регистрации на ngFormController.

Роль форм в клиентских приложениях AngularJS отличается от классических двусторонних приложений. Желательно, чтобы браузер не преобразовывал отправку формы в полную перезагрузку страницы, которая отправляет данные на сервер. Вместо этого AngularJS приложения ПОСТАВЛЯЮТ данные JSON с XHR и получают ответы в виде данных JSON.