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

Question

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)

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

Answer 2

您的代码中的一些问题：

• 没必要用吧scope: { ngModel: '='}。而是使用require.
• 要访问像第四个参数一样传递的 ngModel 值，请使用ngModel.$viewValue.
• 如果您需要访问控制器的变量，您有两种可能性。
  1. 删除与控制器scope获取共享范围answers的属性，并通过传入的链接函数直接访问变量，scope如下所示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;
            });
          });
        }
      }
    }

我的最终建议是不要使用“类”选项，就您而言，最好使用“属性”选项。祝你好运！