Wie schreibe ich Direktive für Klasse in Angular Js?

Question

Die einschränken Option wird in der Regel auf:

'A' - nur Streichhölzer Name-Attribut
'E' - nur Elementname
'C' entspricht - nur
'M' Klassennamen übereinstimmt - nur Spiele Kommentar

‚C‘ - nur Spiele Klassenname nicht funktioniert

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

ich eine Richtlinie über die Klasse ein geschaffenes mit Element verbunden. Bei Änderung des Wertes möchte ich eine API aufrufen und den Wert eines anderen Elements ändern. Es wird jedoch keine Änderung bei der Änderung beobachtet.

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

Fahrzeug Jahr Frage hat eine Klasse gültig-vehicleyear. Was fehlt mir hier, oder gibt es noch etwas anderes bei der Änderung der Antworten? Ich schrieb eine Richtlinie validVehicleyear auf Klasse bei Fahrzeugjahr Frage, dies möchte ich auf Wechsel des Jahres aufrufen und neue Optionen für Fahrzeug machen, aber es funktioniert nicht.

plnkr.co/edit/BFGXr7LNAe0KvQipj9JJ?p=preview

Ich habe um und stellte fest, dass Außen-/Innen Richtlinie Konzept kann hier arbeiten. aber nicht, wie man sich auf die dynamischen Klassen bezieht.

Answer 1

Einige Probleme im Code:

• ist nicht erforderlich Verwendung scope: { ngModel: '='}. Verwenden Sie stattdessen require.
• Verwenden Sie ngModel.$viewValue für den Zugriff auf den Wert des ngModel-Werts, der wie das vierte Argument übergeben wird.
• Wenn Sie Zugriff auf die Variable Ihres Controllers benötigen, haben Sie 2 Möglichkeiten.
  1. die scope Eigenschaft entfernen, um einen Umfang geteilt bekommen mit der Steuerung und den Zugriff direkt auf das answers Variable durch die ähnlichen scope.answersscope in der Link-Funktion übergeben.
  2. Dies ist die bessere Option. Zugriff auf die Variablen answers innerhalb der isolierten Bereichseigenschaft Ihrer Anweisung freigeben.
  scope: { answers: '=' }

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

Meine letzte Empfehlung nicht die Klasse Option ist, in Ihrem Fall, es ist besser, die Attribut-Option. Viel Glück!

Answer 2

Zurück aus your other question, habe ich versucht, ein paar Dinge, von denen keine aus diesem Grund arbeitete:

Sie eine Richtlinie als eine Klasse übergeben, sondern dynamisch durch Interpolation in sich selbst, die schlechte Praxis (https://docs.angularjs.org/guide/interpolation#known-issues).Der Klassenname wird interpoliert und das Element gerendert, aber die Anweisung wird während der Interpolation nicht kompiliert.

Das einzige, was arbeitete, war die Richtlinie Name in klar passieren:

class="form-control valid-vehicleyear" 

Aber dann alle Ihre ausgewählten Elemente werden diese Klasse/Richtlinie haben.

Sie versuchen alles zu automatisieren, und Sie schieben das Konzept auf die Spitze, was Ihren Code sehr unlesbar und scheinbar unmöglich zu debuggen macht.

Es ist nichts falsch daran, ein Formular Element für Element zu erstellen und benutzerdefinierte Anweisungen für eine bessere Kontrolle auf jedes von ihnen zu setzen.

Es ist jedoch alles falsch, dynamische Anweisungen als Klassen von einem JSON-Objekt zu übergeben.

Erstellen Sie einfach Ihr Formular normal. Es wird nicht weniger kühl oder weniger lesbar und es wird Best Practice (https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#restrict-to-elements-and-attributes)

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