如何在Angular Js中编写类的指令？

restrict选项通常设置为：

‘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"

我在与element相关的类上创建了一个指令。 在价值变化时，我想调用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 make设置新选项，但它不起作用。

plnkr.co/edit/BFGXr7LNAe0KvQipj9JJ?p=preview

我查了一下，发现外/内指令概念可以在这里工作。 但没有得到如何申请动态类。

Answer 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 ）

   ... 

Answer 2

您的代码中的一些问题：

• 没有必要使用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; }); }); } } } 

我最后的建议是不使用Class选项，在你的情况下，最好使用Attribute选项。 祝好运！