Как написать директиву по классу в Angular Js?

Параметр ограничения обычно имеет значение:

'A' - соответствует только имени атрибута
'E' - соответствует только имени элемента
'C' - соответствует только имени класса
'M' - соответствует только комментарий

'C' - только совпадение имени класса не работает

Class="form-control **valid-vehicleyear** ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched"

Я создал директиву по классу, связанному с элементом. При изменении значения я хочу вызвать api и изменить значение другого элемента. Но изменений не наблюдается.

controlDirective.js

  function validVehicleyear($scope, $http) {
        return {
            restrict: 'C',
            scope: {
                ngModel: '=',                
            },
            link: function (scope, element, attrs, ngModel) {
                element.bind('change', function () {
                    console.log('here in validVehicleyear');
                    $http.get('api.php'+scope.ngModel)
                            .then(function (response) {
                                $scope.answers.VehicleMake = response.data;
                            });
                });
            }
        }
    }

Вопрос года транспортного средства имеет класс действительного транспортного средства. то, чего я здесь не хватает, или есть ли что-то другое в смене ответов. Я написал директиву validVehicleyear на классе в вопросе Vehicle year, это я хочу вызвать изменение года и установить новые параметры для Vehicle make, но он не работает.

plnkr.co/edit/BFGXr7LNAe0KvQipj9JJ?p=preview

Я проверил и обнаружил, что внешняя/внутренняя директива может работать здесь. но не получить, как применять динамические классы.

Ответы

Ответ 1

Назад из ваш другой вопрос, я пробовал пару вещей, ни одна из которых не работала по этой причине:

Вы передаете директиву как класс, но динамически путем интерполяции, которая сама по себе является плохой практикой (https://docs.angularjs.org/guide/interpolation#known-issues). Имя класса интерполируется, а элемент, обработанный, но директива не компилируется во время интерполяции.

Единственное, что сработало, это передать имя директивы в ясном виде:

class="form-control valid-vehicleyear"

Но тогда все ваши элементы выбора будут иметь этот класс/директиву.

Вы пытаетесь автоматизировать все, и вы подталкиваете концепцию до крайности, что делает ваш код очень нечитаемым и, по-видимому, невозможно отлаживать.

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

Однако все не так с передачей динамических директив как классов из объекта JSON.

Просто создайте форму. Он будет не менее прохладным или менее читаемым, и он будет следовать наилучшей практике (https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#restrict-to-elements-and-attributes)

<select valid-vehicleyear>
<select valid-makemodel>
...

Ответ 2

Некоторые проблемы в вашем коде:

  • Не нужно использовать scope: { ngModel: '='}. Вместо этого используйте require.
  • Для доступа к значению ngModel, переданному как 4-й аргумент, используйте ngModel.$viewValue.
  • Если вам нужен доступ к переменной вашего контроллера, у вас есть 2 возможности.
    • удалить свойство scope для получения общей области с контроллером и получить доступ непосредственно к переменной answers через scope, переданной в функции связи, подобной этой scope.answers.
    • Это лучший вариант. разделяя доступ к переменным answers в пределах изолированного свойства scope вашей директивы. scope: { answers: '=' }

Измененный код:

function validVehicleyear($http) {
    return {
      restrict: 'C',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {
        element.bind('change', function () {
          console.log('here in validVehicleyear');
          $http.get('api.php' + ngModel.$viewValue)
            .then(function (response) {
              scope.answers.VehicleMake = response.data;
            });
          });
        }
      }
    }

Моя последняя рекомендация не использует параметр класса, в вашем случае лучше использовать параметр "Атрибут". Удачи!