Question

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

这是plunker

Answer 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。

Answer 2

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

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

另请参阅此 short demo 。

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

2 个答案: