Jak napisać dyrektywę dotyczącą klasy w Angular Js?

Question

ograniczyć możliwość jest zwykle ustawiony:

„A” - przypisanie tylko odpowiada nazwie
„E” - tylko odpowiada Nazwa elementu
„C” - tylko odpowiada nazwa klasy
„M” - tylko pasuje komentarz

'C' - tylko mecze Nazwa klasy nie działa

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

stworzyłem dyrektywę w klasie a skojarzony z elementem. Przy zmianie wartości chcę wywołać api i zmienić wartość innego elementu. Ale zmiany nie są zauważane.

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

Pojazd lat pytanie ma klasy valid-vehicleyear. czego tu brakuje, czy jest jakikolwiek inny na ten temat w sprawie zmiany odpowiedzi.vehicleyear. Napisałem dyrektywę validVehicleyear na zajęciach na pytanie Rok pojazdu, chcę wezwać zmianę roku i ustawić nowe opcje dla marki pojazdu, ale nie działa.

plnkr.co/edit/BFGXr7LNAe0KvQipj9JJ?p=preview

Sprawdziłem wokół i okazało się, że zewnętrzna/wewnętrzna dyrektywa koncepcja może tu pracować. ale nie dostaniesz sposobu na ubieganie się o zajęcia dynamiczne.

Answer 1

Niektóre problemy w kodzie:

• nie jest konieczne stosowanie scope: { ngModel: '='}. Zamiast tego użyj require.
• Aby uzyskać dostęp do wartości wartości ngModel przekazanej jak czwarty argument, należy użyć ngModel.$viewValue.
• Jeśli potrzebujesz dostępu do zmiennej swojego kontrolera, masz 2 możliwości.
  1. usunąć właściwość scope dla uzyskania wspólny zakres z kontrolerem, oraz dostęp bezpośrednio do zmiennej answers przez scope przeszedł w funkcji łącza jak ten scope.answers.
  2. To jest lepsza opcja. współdzielenie dostępu do zmiennych answers w obrębie izolowanej właściwości scope dyrektywy. scope: { answers: '=' }

Zmodyfikowany kod:

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

Moje ostatnie zalecenie to nie użyć opcji Ćwiczenia, w Twoim przypadku, to lepiej użyć opcji atrybutu. Powodzenia!

Answer 2

Powrót z your other question, próbowałem kilka rzeczy, z których żaden nie pracował z tego powodu:

przekazać dyrektywę jako klasy, lecz dynamicznie przez interpolację, która sama w sobie jest złą praktyką (https://docs.angularjs.org/guide/interpolation#known-issues).Nazwa klasy jest interpolowana i element jest renderowany, ale dyrektywa nie jest kompilowana podczas interpolacji.

Jedyną rzeczą, która pracowała było podać nazwę dyrektywy jasno:

class="form-control valid-vehicleyear" 

Ale wtedy wszystkie elementy będą musiały wybrać tej klasie/dyrektywa.

Próbujesz zautomatyzować wszystko, a pomysł przenosi się do granic możliwości, co sprawia, że ​​kod jest bardzo nieczytelny i prawdopodobnie nie można go debugować.

Nie ma nic złego w budowaniu elementu po elemencie i wprowadzaniu niestandardowych dyrektyw dla każdego z nich w celu uzyskania lepszej kontroli.

Jest jednak wszystko, co jest złego w przekazywaniu dynamicznych dyrektyw jako klas z obiektu JSON.

Po prostu buduj swój formularz w normalny sposób. To nie będzie mniej chłodne lub mniej czytelny i będzie zgodnie z najlepszą praktyką (https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#restrict-to-elements-and-attributes)

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