使用内插名称发布注册表控件

Question

我有以下代码尝试使用进行一些验证样式ng-class。

<tr ng-repeat="item in items">
  <td>
    <select name="itemName{{$index}}" ng-model="item.name" ng-options="o for o in nameOptions"
      ng-class="{ 'custom-error': myForm.itemName{{$index}}.$invalid && !myForm.itemName{{$index}}.$pristine }"
      required>
        <option value="">SELECT</option>
    </select>
  </td>
</tr>

我的课程尚未申请，我看不到原因。生成的html符合预期，其名称与ng-class表达式中的对应名称匹配。

当我将其复制到ng-repeat（不$index用于命名）之外时，它可以按预期工作。

Answer 1

发生这种情况的原因是，控件的名称（在其父窗体上注册该控件的名称）是在ngModelController的实例化过程中检索到的，
根据文档
，该名称发生在预链接阶段*之前（因此尚无内插法）。

如果您检查myForm的属性，就会发现它确实具有键为“ itemName {{$ index}}”的属性。

*更新

上的文档 $compile
对于了解是什么使指令滴答作响以及“幕后”发生了什么提供了很好的资源。

简而言之，有两个主要阶段： 编译 阶段和 链接 阶段。

在 编译
阶段，正在准备模板（例如，可能需要克隆等），并使模板具有Angular意识（例如，编译指令并解析表达式并准备对其进行求值），但它并不限于一个范围（因此没有要评估的范围）。

编译功能用于转换模板DOM。由于大多数指令不执行模板转换，因此不经常使用。需要编译函数的示例是转换模板DOM的指令（例如ngRepeat）或异步加载内容（例如ngView）。

的 连接 相被进一步分为两个子阶段： 预连接 和 连接后 。

在此阶段，作用域起作用，并且name可以根据作用域的属性/函数评估插值表达式（例如，您的属性）。

链接功能负责注册DOM侦听器以及更新DOM。克隆模板后执行。这是放置大多数指令逻辑的地方。

预链接功能
在链接子元素之前执行。执行DOM转换并不安全，因为编译器链接功能将无法找到正确的链接元素。

链接后功能 在链接子元素之后执行。在后链接功能中执行DOM转换是安全的。

因此，在您的情况下，将发生以下情况：

1. 该ngModel指令负责在其父表单的上注册该元素FormController，并调用formCtrl.$addControl(modelCtrl);其后链接功能。

2. 在FormController使用指定的控制器的$name性能注册控件：
   form[control.$name] = control;

3. 在ngModel控制器是的实例的情况下ngModelCntroller，其$name属性定义如下：
   function(..., $attr, ...) { ... this.$name = $attr.name;

4. 由于控制器是在预链接阶段之前实例化的，因此将$attr.name其绑定到未插值的字符串（即“ itemName {{$ index}}”）。

更新2

现在我们知道了问题所在，继续解决它似乎很合逻辑:)

这是可以解决问题的实现：

1. 请勿设置name属性，因此不会进行任何注册myForm（我们将手动进行注册）。

2. 创建一个指令，该指令FormController仅在根据元素的作用域评估表达式之后才将控件注册到父窗体中（让我们调用指令later-name）。

3. 由于控件是FormController通过控件注册到的ngModelController，因此我们的指令必须（通过其 require 属性）访问这两个控制器。

4. 在注册控件之前，我们的指令将更新ngModelController的$name属性（并在元素上设置名称）。

5. 我们的指令还必须注意“手动”删除控件（因为我们是手动添加控件）。

非常简单：

<select later-name="itemName{{$index}}"                  <!-- (1) -->

app.directive('laterName', function () {                   // (2)
    return {
        restrict: 'A',
        require: ['?ngModel', '^?form'],                   // (3)
        link: function postLink(scope, elem, attrs, ctrls) {
            attrs.$set('name', attrs.laterName);

            var modelCtrl = ctrls[0];                      // (3)
            var formCtrl  = ctrls[1];                      // (3)
            if (modelCtrl && formCtrl) {
                modelCtrl.$name = attrs.name;              // (4)
                formCtrl.$addControl(modelCtrl);           // (2)
                scope.$on('$destroy', function () {
                    formCtrl.$removeControl(modelCtrl);    // (5)
                });
            }            
        }
    };
});

另请参 见此简短演示 。