angularjs - 发出带有内插名称的注册表单控件

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>

我的类(class)没有被应用，我不明白为什么。生成的 html 看起来与预期一致，其名称与 ng-class 表达式中的对应名称相匹配。

当我在 ng-repeat 之外复制此内容(不使用 $index 进行命名)时，它会按预期工作。

Answer 1

发生这种情况是因为在 ngModelController 实例化期间检索了控件的名称(在其父窗体上注册的名称)， according to the docs 发生在预链接阶段*之前(因此还没有插值)。

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

<小时/>

*更新

$compile 上的文档 是了解指令生效的原因以及“幕后”情况的绝佳资源。

简单来说，有两个主要阶段:编译阶段和链接阶段。

在编译阶段，正在准备模板(例如，可能需要克隆等)并使其具有 Angular 感知能力(例如，编译指令并解析表达式并准备好被评估)，但它还没有绑定(bind)到范围(因此没有什么可以评估)。

The compile function deals with transforming the template DOM. Since most directives do not do template transformation, it is not used often. Examples that require compile functions are directives that transform template DOM, such as ngRepeat, or load the contents asynchronously, such as ngView.

链接阶段进一步分为两个子阶段:链接前和链接后。

在此阶段，范围开始发挥作用，并且可以根据范围的属性/函数评估插值表达式(例如您的 name 属性)。

The link function is responsible for registering DOM listeners as well as updating the DOM. It is executed after the template has been cloned. This is where most of the directive logic will be put.

Pre-linking function
Executed before the child elements are linked. Not safe to do DOM transformation since the compiler linking function will fail to locate the correct elements for linking.

Post-linking function Executed after the child elements are linked. It is safe to do DOM transformation in the post-linking function.

<小时/>

因此，就您而言，会发生以下情况:

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

2. FormController 使用指定 Controller 的 $name 属性来注册控件:
   form[control.$name] = control;

3. 对于 ngModel ， Controller 是 ngModelCntroller 的实例，它的 $name 属性定义如下:< br/> function(..., $attr, ...) { ... this.$name = $attr.name;

4. 由于 Controller 在预链接阶段之前实例化，因此 $attr.name 绑定(bind)到未插值的字符串(即“itemName{{$index}}”)。

<小时/>

更新2

现在我们知道问题是什么，继续解决它似乎是合乎逻辑的:)

这是一个可以解决该问题的实现:

1. 不要设置 name 属性，因此 myForm 不会注册任何内容(我们将手动进行注册)。

   <

2. 创建一个指令，仅在根据元素的范围评估表达式后才向父表单的 FormController 注册控件(我们将该指令称为 later-name) .

3. 由于控件通过 ngModelController 注册到 FormController，因此我们的指令必须访问这两个 Controller (通过其 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)
                });
            }            
        }
    };
});

另请参阅此 short demo 。