Question

restrict选项通常设置为：

＆＃39; A＆＃39; - 仅匹配属性名称
＆＃39; E＆＃39; - 仅匹配元素名称
＆＃39; C＆＃39; - 仅匹配班级名称
＆＃39; M＆＃39; - 仅匹配评论

＆＃39; C＆＃39; - 只匹配类名不起作用

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

从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。
如果您需要访问控制器的变量，您有2个可能性。
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;
            });
          });
        }
      }
    }

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

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

2 个答案: