从指令向父元素添加类

Question

我试图将has-error类添加到div (输入的父类)中，但我不能在细枝中访问输入的name，因为name来自php，并且在那里不可用，所以我不能使用ng-class属性。

我有一个连接到该输入的指令，它可以检测ngModelCtrl.$invalid是否为真或假，我正在尝试从那里添加类。

输入小枝：

<input type="text" ng-model="integerInputValue" integer-input 
       {{ block('widget_attributes') }}
       {% if value is not empty %}value="{{ value }}" {% endif %} />

指令：

(...)
      link: function (scope, element, attrs, ngModelCtrl) {
        // Workaround so that we don't lose the value.
        scope.integerInputValue = attrs.value;

        attrs.$set('ngPattern', '/^-?[0-9]+$/');

        function fromUser (text) {
          if (ngModelCtrl.$invalid) {
            angular.element(element).parent().addClass('has-error');
          } else if (ngModelCtrl.$valid) {
            angular.element(element).parent().removeClass('has-error');
          }
(...)

我尝试的是检测fromUser函数中的ngModelCtrl.$invalid是否为真或假，该函数检测输入的每个字符，并从中添加或删除类。我还有一个只允许0-9和"-“作为第一个字符的ng-pattern。

这在某种程度上是因为类被添加和删除了，但是，例如：

50-没有得到这个类，50--得到了，当删除时，50仍然有这个类，而5没有。

我猜有一种更好的方法可以将类添加到父类。

Answer 1

如果我检查输入，它的名称是name="wizard_page_type[blocks][0][answers][0][value]"

要在ng-class中使用类似的名称，请使用括号属性访问器：

<form name='form1'>
    <input name="wizard_page_type[blocks][0][value]"
           ng-model="kk" required >
</form>

<div ng-class="{'has-error': form1['wizard_page_type[blocks][0][value]'].$invalid}">
</div>

ngModelController处理表单的最佳方式是为输入指定合理的名称。在向ngFormController注册时，ngModelController使用该名称。

表单在客户端AngularJS应用程序中的角色与在传统往返应用程序中的角色不同，浏览器最好不要将表单提交转换为将数据发送到服务器的完整页面重新加载。相反，AngularJS应用程序使用XHR发布JSON数据，并接收作为JSON数据的响应。