Question

我正在尝试创建一个指令，它将具有完整的bootstrap表单字段布局以及表单验证消息等，同时控制来自javascript模型定义的html，我认为这很简单，但似乎并不像现在。

目前我已经为每个字段编写了以下模板：

'<div ng-form="myform">' +
        '<div class="control-group" class="{{options.class}}" >' +
        '<div class="control-label">{{options.label}} {{options.required ? "*" : ""}} </div>' +
        '<div class="controls">';

    html += '<input type="number" name="myfield" placeholder="{{options.placeholder}}" ng-required="options.required" ' +
        'ng-pattern="{{options.pattern}}" ng-minlength="{{options.minlength}}" ng-maxlength="{{options.maxlength}}" ' +
        'ng-readonly="options.readonly" autofocus="options.autofocus" ng-change="ngChange"  autocomplete="off" data-ng-model="ngModel"/>'

    html += '<div class="field-validation-error" data-ng-show="myform.myfield.$invalid && myform.myfield.$dirty"> ' +
                '<div data-ng-show="myform.myfield.$error.required ">{{options.label}} is required!!!</div>' +
                '<div data-ng-show="myform.myfield.$error.pattern">{{options.patternMessage}}</div>' +
                '<div data-ng-show="myform.myfield.$error.minlength">{{options.label}} should have atleast {{options.minlength}} character/s.</div>' +
                '<div data-ng-show="myform.myfield.$error.maxlength">{{options.label}} can have maximum {{options.maxlength}} character/s.</div>' +
                '<div data-ng-show="myform.myfield.$error.min">{{options.label}} cannot have value less than {{options.min}}</div>' +
                '<div data-ng-show="myform.myfield.$error.max">{{options.label}} cannot have value greater than {{options.max}}</div>' +
            '</div>';

我在控制器中有相应的对象。

  $scope.fields = {
             name : {lable: "Name", required: true, min-length=5}
  }

所以将此对象传递给指令然后获取根据字段详细信息生成的模板应该有效，但是无法实现最终结果。我尝试了各种方法。

具有模板和输入标记的单独指令

一个。有一个指令＆＃39; E＆＃39;这将产生输入标签，但ng-change和ng-model由于某种原因不同步，请检查：PLUNKER

湾有一个指令＆＃39; A＆＃39;将ng-minlength，ng-maxlength attrs添加到输入标签，验证不会被触发。检查此PLUNKER
将所有内容都包含在一个指令中，但是如何将ng-change，ng-blur，typeahead从我的指令传递给输入标记，这不是理想的做法，不断将所有内容放在范围内并继续将其添加到输入中。

有人可以指导我如何才能达到最终结果.. 选项2适用于大多数情况，但随着情景的增加开始出现问题，这种方式我想不惜一切代价避免。因此我回到了第一个实现，即2指令方法，一个指令用于生成输入标签，另一个用于布局和验证

但是如果我有输入标签的指令作为＆＃39; E＆＃39;然后所有的ng-change＆amp; ng-model将需要附加$ parent，因为我通过范围获得选项，所以然后再次指令的最终用户将记住为与范围的每次交互传递$ parent，这在透明度级别上失败。所以选择＆＃39; A＆＃39;指令似乎是最好的方法。

有人可以帮助我解决问题1.b这就是为什么验证不起作用如果我在不同的指令上使用ng-form而不是输入标签指令（我知道验证是在编译阶段而不是链接阶段完成的）

或者如果有人可以指出类似的东西，试图实现我正在尝试的东西。注意：我看到了形状角度，但它也有输入上没有更改等问题。有没有其他类似的解决方案。

Answer 1

你需要编译元素

$compile(element)(scope)

目前你没有编译角度，也不知道你在dom中做出的改变

带有验证包装的指令

1 个答案: