如何在 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"

我在与元素关联的类上创建了一个指令。在更改值时，我想调用一个 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;
                            });
                });
            }
        }
    }

Vehicle year 问题有一个类 valid-vehicleyear。我在这里缺少什么，或者在更改 answers.vehicleyear 时还有其他任何内容。 我在车辆年份问题的课堂上写了一个指令validVehicleyear，我想呼吁改变年份并为车辆制造设置新选项，但它不起作用。

plnkr.co/edit/BFGXr7LNAe0KvQipj9JJ?p=preview

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

Answer 1

从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>
...

Answer 2

代码中的一些问题：

• 没有必要使用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 选项。 祝你好运！