Question

在一个指令中，我正在创建一个文本框，并随之进行验证。

正在正确创建texbox并且正常工作。

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

但是错误div ng-show没有从指令的propErrPattern中正确生成：＆＃39; =＆＃39; AND propErrReqr：＆＃39; =＆＃39;。

我已尝试过至少十几种方法，但没有任何作用。模板正在生成：

<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 =＆＃34; propErrPattern || propErrReqr＆＃34;）

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

请注意，您的指令中属于驼峰的属性应通过虚线＆＃39; - ＆＃39;设置。名称。那就是propErrPattern成为propr-err模式。接下来请注意，您的propErrPattern和propErrReqr的值应以表单名称开头，在本例中为“myForm＆＃39;。

这两项改变应该可以使事情正常运作。

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

1 个答案: