AngularJS - 表单字段的Auto $ pristine和$ error样式

Question

当$ error和$ $ pristine时，可以使用简单的指令将样式应用于表单字段吗？

例如，而不是写一个冗长的：

<div 
   ng-class="{'has-error':(myform.myField.$error && !myform.myField.$pristine) === true}">
   <!-- myField is inside the div -->

我可以写下这样的内容：

<div err-pris-cls="'has-error', myField">

指令是否可以解决这个问题？

Answer 1

我不是创建一个基本上会添加类或删除它的新指令，而是使用ng-class指令本身，但是会将代码从html移动到控制器，这对于拥有可测试的代码也是有意义的。 isValid控制器功能可以很容易地测试。

<强>标记

<div ng-class="{'has-error': isValid(myform.myField)">

<强>代码

$scope.isValid = function(field){
   return (field.$error && !field.$pristine) === true;
}