How to write directive on class in Angular Js?

Question

The restrict option is typically set to:

\'A\' - only matches attribute name
\'E\' - only matches element name
\'C\' - only matches class name
\'M\' - on

Answer 1

Back from your other question, I tried a couple of things none of which worked for this reason:

You pass a directive as a class but dynamically by interpolation which in itself is bad practice (https://docs.angularjs.org/guide/interpolation#known-issues). The class name is interpolated and the element rendered but the directive is not compiled during interpolation.

The only thing that worked was to pass the directive name in clear:

class="form-control valid-vehicleyear"

But then all your select elements will have this class/directive.

You're trying to automate everything and you're pushing the concept to the extreme which makes your code very unreadable and apparently impossible to debug.

There's nothing wrong with building a form element by element and putting custom directives on each of them for better control.

However there is everything wrong with passing dynamic directives as classes from a JSON object.

Just build your form normally. It won't be less cool or less readable and it will follow best practice (https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#restrict-to-elements-and-attributes)

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

Answer 2

Some issues in your code:

• Isn't necessary use scope: { ngModel: '='}. Instead use require.
• For access to the value of the ngModel value passed like 4th argument, use ngModel.$viewValue.
• If you need access to the variable of your controller, you have 2 posibilities.
  1. remove the scope property for get a shared scope with the controller, and access directly to the answers variable through the scope passed in the link function like this scope.answers.
  2. This it's the better option. sharing access to the answers variables within the isolated scope property of your directive. scope: { answers: '=' }

The modified code:

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;
            });
          });
        }
      }
    }

My final recommendation it's not use the Class option, in your case, it's better use the Attribute option. Good luck!