Question

我正在尝试使用配置创建的字段，验证和其他精品。

这里：http://plnkr.co/edit/8cP5YMKUGu6LfBCsRxAZ?p=preview是一个有效的解决方案，但是当我尝试更多步骤 - 添加逻辑时（例如attrs.hasOwnProperty（'required'）然后向模板添加内容） - 我是stucked。（确切地说 - 在这个plunker中，我想删除所有连接的人员，只有在字段要求为真的情况下才删除并添加它。

所以我认为（但可能是错的）我必须使用一些链接或编译函数来为每个字段准备模板。

所以我这样生产：

  KPNDirectives.directive("formField", function () {
  return {
    restrict: 'E',
    replace:true,
    scope: {
      fieldModel : '=ngModel'
    },
    link: function (scope, element, attrs) {
      var type = attrs.fieldType || 'text'
      var htmlText = 
       '<div class="form-group" ng-form="form" ng-class="{true: \'has-error\', false: \'has-success\'}[form.'+attrs.fieldName+'.$invalid]">'+
  '<label class="control-label col-sm-2" for="'+attrs.fieldName+'">'+attrs.fieldLabel+'</label>'+
  '<div class="col-sm-6">'+
    '<input class="form-control" type="'+type+'" placeholder="enter valid name" name="'+attrs.fieldName+'" ng-model="'+scope.fieldModel+'" ng-minlength=3 ng-maxlength=20 required/>'+
    '<span class="help-block">'+
      '<span ng-show="form.'+attrs.fieldName+'.$error.required">Required field</span>'+
      '<span ng-show="form.'+attrs.fieldName+'.$error.minlength">Too few chars - min is (6)</span>'+
      '<span ng-show="form.'+attrs.fieldName+'.$error.maxlength">Too much chars - max is (20)</span>'+
      '&nbsp;'+
    '</span>'+
  '</div>'+
'</div>';
      element.replaceWith(htmlText);
    }
  }
  });

但它不起作用。

这是plunker http://plnkr.co/edit/OZMuxzsnoVmATpeTdSW9?p=preview

Answer 1

试试这个DEMO

您的代码存在一些问题

您必须为您的指令定义模板：template:"<div></div>"并将html附加到其中：element.append(htmlText);
使用 fieldModel：'='而不是 fieldModel：'= ngModel'，因为您使用 field-model =“field.model”在你的HTML中。
使用 ng-model =“fieldModel”代替 ng-model =“'+ scope.fieldModel +'”
您需要使用$ compile服务编译您的html：$compile(element.contents())(scope);

ng-repeat与编译或链接？

1 个答案: