Javascript AngularJS指令创建左文本框并验证

在一个指令中，我正在动态创建一个文本框，并随附验证

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

见plnker：

但是错误div ng show不是从指令的properPattern:“=”和properReqr:“=”正确生成的

我至少试过十几种方法，但都不管用。模板正在生成：

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

---

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

<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变成了properr模式。 接下来请注意，properPattern和properReqr的值应以表单名称开头，在本例中为“myForm”

---

这两个更改应该可以使事情正常工作。

就是这样！谢谢，因为我花了很多时间研究这个。