如何在 Angular Js 的类上编写指令? [英] How to write directive on class in Angular Js?
问题描述
限制选项通常设置为:
'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) {返回 {限制:'C'，范围: {ngModel: '=',},链接:函数(范围、元素、属性、ngModel){element.bind('change', function () {console.log('这里在 validVehicleyear');$http.get('api.php'+scope.ngModel).then(功能(响应){$scope.answers.VehicleMake = response.data;});});}}}车辆年份问题有一个类有效车辆年份.我在这里缺少什么，或者在改变 answers.vehicleyear 时还有什么其他的.我在车辆年份问题的课堂上写了一条指令 validVehicleyear，我想调用年份的更改并为车辆制造商设置新选项，但它不起作用.
plnkr.co/edit/BFGXr7LNAe0KvQipj9JJ?p=preview
我检查了一下，发现外部/内部指令概念可以在这里工作.但不知道如何申请动态班.
返回 你的另一个问题，我尝试了几件事情，但由于这个原因没有一个工作:
您将指令作为类传递，但通过插值动态传递，这本身就是不好的做法(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)
The restrict option is typically set to:
'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name
'M' - only matches comment
'C' - only matches class name is not working
Class="form-control **valid-vehicleyear** ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched"
I created a directive on class associated with element. On change of value i want to call a api and change value of other element. But no change is observed on change.
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 question has a class valid-vehicleyear. what I am missing here, or is there any other to this on change of answers.vehicleyear. I wrote a directive validVehicleyear on class at Vehicle year question, this i want to call on change of year and set new options for Vehicle make, but it not working.
plnkr.co/edit/BFGXr7LNAe0KvQipj9JJ?p=preview
I checked around and found that outer/inner directive concept can work here. but not getting how to apply for the dynamic classes.
Back from your other question, I tried a couple of things none of which worked for this reason:
You pass a directive as a class but dynamically by interpolation which in itself is bad practice (https://docs.angularjs.org/guide/interpolation#known-issues). The class name is interpolated and the element rendered but the directive is not compiled during interpolation.
The only thing that worked was to pass the directive name in clear:
class="form-control valid-vehicleyear"
But then all your select elements will have this class/directive.
You're trying to automate everything and you're pushing the concept to the extreme which makes your code very unreadable and apparently impossible to debug.
There's nothing wrong with building a form element by element and putting custom directives on each of them for better control.
However there is everything wrong with passing dynamic directives as classes from a JSON object.
Just build your form normally. It won't be less cool or less readable and it will follow best practice (https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#restrict-to-elements-and-attributes)
<select valid-vehicleyear>
<select valid-makemodel>
...
这篇关于如何在 Angular Js 的类上编写指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
