Angular 在 ng-form 模板中丢失范围

Question

我正在尝试这个，

    <div ng-form="sadadPaymentForm" class="sadadPaymentForm"  ng-if="vm.isSadadEnabled" name="sadadPaymentForm"  validate-popup-form>
     <div ng-if="vm.isSadadEnabled">
       <div class="credit-debit-card-div" ng-include="'sadadTemplate'" ng-show="vm.view_tab == 'tab7'">
       </div>
    </div>
   </div>
   <span ng-show="vm.view_tab=='tab7' && vm.isSadadEnabled">
     <button type="button" class="primary inline pay-now" id="paynowbtn" ng-disabled="!vm.checked3 || vm.sadadPaymentForm.$invalid" ng-click="vm.payByVoucher();" analytics-on="click" analytics-event="uaevent" analytics-eventcategory="Payment" analytics-eventaction="PayNow"
             analytics-eventlabel="Pay now">
               Pay by sadad
     </button>
   </span>

而且，我的模板在另一个 html 文件中

  <script type="text/ng-template" id="sadadTemplate">
    <input fieldlabel="Online Payment ID" type="text" name="onlinePaymentId" ng-model="vm.sadadpayment.onlinePaymentId"  class="form-control input-type-text"
                    ng-model-options="{ debounce: 100 }" validationKey-required="PaymentAdress1IsRequired" required maxlength="200">
  </script>

此处 vm.sadadPaymentForm.$invalid 不起作用，但独立组件验证对输入模糊起作用。

但是，如果我将 vm 添加到 ng-form 中，即像这样

    <div ng-form="vm.sadadPaymentForm" class="sadadPaymentForm"  ng-if="vm.isSadadEnabled" name="vm.sadadPaymentForm"  validate-popup-form>
     <div ng-if="vm.isSadadEnabled">
       <div class="credit-debit-card-div" ng-include="'sadadTemplate'" ng-show="vm.view_tab == 'tab7'">
       </div>
    </div>
   </div>

此处 vm.sadadPaymentForm.$invalid 有效，但个别组件验证因输入模糊而失败，例如，TypeError: Cannot read 属性 'onlinePaymentId' of undefined

帮助我了解如何使个人验证和最终表单验证工作together.Angular Ver 1.5，无法将此now.Need 升级为 1.5 的解决方案。

Answer 1

表单 name 属性应该有 sadadPaymentForm 尽管 vm.sadadPaymentForm。由于您没有正确指定表单 name，因此验证失败。

name="vm.sadadPaymentForm"

应该是

name="sadadPaymentForm"

Answer 2

确定发现问题了，它基本上是一个范围问题。

已替换

ng-if="vm.isSadadEnabled"

和

ng-show="vm.isSadadEnabled"

ng-if 阻止了 DOM 渲染，从而杀死了作用域变量 vm 本身

Angular 在 ng-form 模板中丢失范围

Angular losing scope in ng-form template

javascript

angularjs

angularjs-scope