如何在Angular Js中为类编写指令

How to write directive on class in Angular Js?

本文关键字：指令 Angular Js      更新时间：2023-09-26

限制选项通常设置为:

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

我在class上创建了一个与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，我想调用更改年份并为车辆制作设置新选项，但它不起作用。

plnkr.co/编辑/BFGXr7LNAe0KvQipj9JJ吗?p =

预览

我检查了一下，发现外部/内部指令概念可以在这里工作。但是不知道如何申请动态类

回到你的另一个问题，我尝试了一些事情，没有一个工作，因为这个原因:

你传递一个指令作为一个类，但动态地通过插值本身是不好的做法(https://docs.angularjs.org/guide/interpolation#known-issues)。类名被插值，元素被渲染，但指令在插值期间不会被编译。

唯一有效的方法是用clear传递指令名:

class="form-control valid-vehicleyear"

但是你所有的select元素都会有这个class/指令。

你试图自动化一切，你把这个概念推向了极端，这使得你的代码非常难读，显然不可能调试。

一个元素一个元素地构建表单，并在每个元素上添加自定义指令以获得更好的控制，这并没有什么错。

然而，将动态指令作为JSON对象的类传递是完全错误的。

按正常方式构建表单。它不会不酷或可读性差，它将遵循最佳实践(https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#restrict-to-elements-and-attributes)

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

代码中的一些问题:

  • 不需要使用scope: { ngModel: '='}。用require代替。
  • 要访问像第4个参数一样传递的ngModel值的值，使用ngModel.$viewValue。
  • 如果您需要访问控制器的变量，您有两种可能性。
    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选项。好运！

相关文章：