javascript - AngularJS 指令创建 OnTheFly 文本框和验证

Question

在指令中，我正在动态创建一个文本框以及随之而来的验证。

文本框已正确创建并且可以工作。

参见 plnker:
https://plnkr.co/edit/YJIwS8bD0w5e9LbWBtlJ?p=preview

但是错误 div ng-show 不是从指令的 propErrPattern: '=' AND propErrReqr: '=' 正确生成的。

我已经尝试了至少十几种方法，但没有任何效果。模板正在生成:

<p class="error" ng-show="propErrPattern || propErrReqr">
    <b class="ng-binding">Required. Length:-  Characters:</b> Letters, Numbers, Dash, Underscore, Space
</p>

<!-- instead of generating   -->
<!-- instead of generating   -->
<p class="error" ng-show="FirstName.$error.pattern || irstName.$error.required">


app.directive('textBox', function () {
    return {
        scope: {
            label: '@label',
            value: '@value',
            property: '=',
            propErrPattern: '=',
            propErrReqr: '=',
            lenMin: '@lenMin',
            lenMax: '@lenMax',
        },
        restrict: 'E',
        replace: true,
        templateUrl: 'textboxTemplate.html'
    };
});

在一个表单中，我通过以下方式调用该指令:

<text-box 
    label="First Name" 
    value="FirstName" 
    property='FirstName' 
    propErrPattern='FirstName.$error.pattern' 
    propErrReqr='FirstName.$error.required' 
    lenMin='3' 
    lenMax='15'>
</text-box>

textboxTemplate.html(注意 ng-show="propErrPattern || propErrReqr")

<div class="form-group">
    <label for="{{value}}" class="control-label col-sm-4">{{label}}</label>
    <div class="col-sm-8">
        <input type="text"
               class="form-control"
               id="{{value}}"
               name="{{value}}"
               ng-model="property"
               ng-pattern="/^[a-z\d\-_\s]+$/i" 
               ng-minlength="{{lenMin}}"
               ng-maxlength="{{lenMax}}"
               ng-trim="true"
               required />
        <!-- NOT GENERATING CORRECTLY -->
        <!-- NOT GENERATING CORRECTLY -->
        <p class="error" ng-show="propErrPattern || propErrReqr" >
            <b>Required. Length:{{lenMin}}-{{lenMax}}  Characters:</b> Letters, Numbers, Dash, Underscore, Space
        </p>
    </div>
</div>

Answer 1

因此，您的实现存在很多问题。您对该指令的使用应该如下所示。

<text-Box label="First Name" value="FirstName" property='FirstName' 
prop-err-pattern='myForm.FirstName.$error.pattern' 
prop-err-reqr='myForm.FirstName.$error.required' lenMin='3' lenMax='15'>
</text-Box>

请注意，指令中驼峰式大小写的属性应通过短划线“-”名称进行设置。即 propErrPattern 变为 prop-err-pattern。接下来请注意，propErrPattern 和 propErrReqr 的值应以表单名称开头，在本例中为“myForm”。

这两项更改应该会使事情正常工作。