AngularJS：如何在指令中编译表单答案

【问题标题】：AngularJS: how to compile form in a directiveAngularJS：如何在指令中编译表单
【发布时间】：2014-07-07 22:25:35
【问题描述】：

我正在尝试创建一个自定义指令，为元素（表单输入）设置“必需”和“禁用”属性。该指令从范围对象中获取此数据。但是清除必填字段不会将我的表单设置为无效状态。我认为这是关于更改属性后的表单编译。我试图这样做，但得到了一个无限循环:( 如何正确编译我的表单？

这里是plunker

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

您可以只使用ng-disabled 和ng-required，而不是在指令中添加属性。

<div>
  <label for="username">username2</label>
  <input ng-model="data.account.username2" 
  ng-disabled="paintData['data.account.username2'] == 'RO'" 
  ng-required="paintData['data.account.username2'] == 'R'" />
</div>

或者，您可以定义一个使用ng-disabled 和ng-required 的指令模板，并用它替换原始元素：

.directive('metaValidate', function($compile) {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      model: '=',
      paint: '='
    },
    template: '<input ng-model="model" ng-disabled="readonly" ng-required="required"/>',
    link: function(scope, element, attrs) {
      scope.required = scope.paint[element.attr('model')] === 'R';
      scope.readonly = scope.paint[element.attr('model')] === 'RO';
    }
  };
});

然后，像这样使用它：

<input model="data.account.username2" meta-validate paint="paintData"/>

我更喜欢第一种方法，因为它可以响应paintData 的更改。但是，您必须多次重复属性名称。

如果你想试试这个代码，here is an update of your Plunker。

【讨论】：

是的，名字的重复——这正是我想要避免的。如果我有一个包含几个字段的表单，我当然会使用 ng-disabled。但不幸的是，我的表单有 200 多个元素，在这种情况下，使用 ng-required 似乎没什么痛苦:)
顺便说一句，我已经弄清楚如何强制第一种方法响应对paintData的更改。这是更新：link。非常感谢你们！
很好，@vicont。我喜欢它。
这里是plunker的改进版。它不需要为每个元素显式设置“paint”属性，而是我们从父范围观察对象（是的，它是硬编码的依赖项，但在这种特定情况下可以）。可能对某人有用。

【解决方案2】：

重新编译元素可以工作，但为了避免无限循环，您需要先删除meta-validate 属性（这会导致更多的编译等）：

/* At the end of the directive's link function */
attrs.$set('metaValidate', undefined);
$compile(element)(scope);

另请参阅此short demo。

【讨论】：