Question

我从Pete Bacon Darwin采用了一个plunker，并为输入字段验证创建了一个指令。该指令在静态字段中工作正常，但如果在ngRepeat语句中找不到则不起作用。该指令的作用是在它在输入上找到它之后，它在输入元素之后附加一个动态编译的模板（来自html文件的$ http.get，文件本身包含另一个ngRepeat）。该模板包含典型的angularJS验证代码，但由ngRepeat和错误密钥，消息字典生成。不幸的是，当ngrepeat重新运行（例如添加更多输入字段）时，模板似乎没有重新编译（更具体地说，$ field项是未定义的）。

代码非常大，所以我把它包含在plunker

中

现在这是静态字段产生的dom：

    <input name="full_name" type="text" ng-model="vm.user.fullName" required="" ng-pattern="vm.fullNamePattern" ng-minlength="5" ng-maxlength="30" 
data-cv-input-val data-required-error="Your first and last name is required." data-min-length-error="Minimum of two characters per name." 
data-max-length-error="The name is too long." data-pattern-error="Please use this format: Xx[space]Xx.">
<div class="form-fields__error-container ng-scope" ng-class="{'opacity--half': opacityHalf}" ng-show="($field.$dirty || $form.attempt) &amp;&amp; $field.$invalid" style="">
    <!-- ngRepeat: (key, error) in $field.$error -->
    <span ng-repeat="(key, error) in $field.$error" ng-show="error &amp;&amp; tooltipVisible" class="error-tooltip ng-scope ng-binding ng-hide">The name is too long.</span>
    <!-- end ngRepeat: (key, error) in $field.$error -->
    <span ng-repeat="(key, error) in $field.$error" ng-show="error &amp;&amp; tooltipVisible" class="error-tooltip ng-scope ng-binding ng-hide">Minimum of two characters per name.</span>
    <!-- end ngRepeat: (key, error) in $field.$error -->
    <span ng-repeat="(key, error) in $field.$error" ng-show="error &amp;&amp; tooltipVisible" class="error-tooltip ng-scope ng-binding ng-hide">Please use this format: Xx[space]Xx.</span>
    <!-- end ngRepeat: (key, error) in $field.$error -->
    <span ng-repeat="(key, error) in $field.$error" ng-show="error &amp;&amp; tooltipVisible" class="error-tooltip ng-scope ng-binding ng-hide">Your first and last name is required.</span>
    <!-- end ngRepeat: (key, error) in $field.$error -->
</div>

这是来自ng-repeat生成的字段：

<span data-ng-repeat="email in vm.person.emails" ng-scope">
    <input type="email" ng-model="email.email" id="email-2" placeholder="Email" data-cv-input-val="">
    <div class="form-fields__error-container ng-scope ng-hide" ng-class="{'opacity--half': opacityHalf}" ng-show="($field.$dirty || $form.attempt) &amp;&amp; $field.$invalid" style="">
    <!-- ngRepeat: (key, error) in $field.$error -->
    </div><!-- end ngIf: $index > 0 -->
</span>

AngularJS在ngRepeat中动态编译指令

0 个答案: