Angular Jsのクラスでディレクティブを書くには？

Question

制限するオプションが一般的に設定されています：

「A」 - 唯一の一致が
「E」を属性名 - 唯一のクラス名と一致する
「M」の - - だけ一致しただけ
「C」要素名と一致コメント

'C' - 唯一のクラス名と一致したが、私はクラスAのディレクティブを作成し

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

車両年問題は、クラスの有効な-vehicleyearを持っています。私はここで逃しているか、答えの変更にこれに他の何かがあります。車両。 Vehicle yearの質問でクラスにvalidVehicleyearというディレクティブを書いた。これは年の変更を求めて、Vehicle makeの新しいオプションを設定したいが、うまくいかない。

plnkr.co/edit/BFGXr7LNAe0KvQipj9JJ?p=preview

私は周りの点検と内側/外側のディレクティブのコンセプトは、ここで働くことができることを見出しました。動的クラスをどのように適用するかは分かりません。

Answer 1

あなたのコード内のいくつかの問題：

• が必要で、使用scope: { ngModel: '='}はありません。代わりにrequireを使用してください。
• 4番目の引数のように渡されたngModel値にアクセスするには、ngModel.$viewValueを使用します。
• コントローラの変数にアクセスする必要がある場合は、2つの可能性があります。
  1. コントローラと共有スコープを取得するためのscopeプロパティを削除し、このscope.answersようなリンク機能に渡さscopeスルーanswers変数に直接アクセス。
  2. これはより良い選択です。ディレクティブの分離スコーププロパティ内の変数answersへのアクセスを共有します。 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; 
      }); 
      }); 
     } 
     } 
    } 

それはクラスオプションを使用していない私の最終勧告は、あなたのケースでは、それは属性オプションを使用する方が良いでしょう。 幸運を祈る！

Answer 2

戻るyour other questionから、私はこのような理由のために働いていたいずれも物事のカップルを試してみました：

あなたは自分自身に悪い習慣（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> 
...