cordova 页面加载正在触发未打开的 Modal ng-repeat 脚本运行

Question

我有一个模板 PageA 的控制器。 PageA 上有一个模式，仅在用户单击按钮时打开。 Modal 中是 ng-repeat；使用

ng-init

，当 ng-repeat 完成（

$last

）时，将调用

genQRCode()

函数。这样做是为了首先创建 DIV，将其添加到 dom，然后再将 qrcode

<canvas>

附加到 DIV。

问题是，一旦 PageA 加载，即使用户没有单击按钮来打开模态框，也会调用

genQRCode()

。

按钮：

<button ng-click="openTicketModal();" class="button button-block button-large-custom" style="">View Tickets</button>

莫代尔

<div ng-repeat="ticket in club.tickets" id="ticketID_{{ticket.ticketID}}" ng-init="$last && genQRCode()">

  ... qrCode will be attached here in a <canvas> ...

</div>

控制器

  $scope.genQRCode = function() {
    for (var x=0;x<$scope.club.tickets.length;x++) {
      var ticket = $scope.club.tickets[x] ;

      angular.element(document.querySelector('#ticketID_'+ticket.ticketID)).empty() ;
      
      jQuery('#ticketID_'+ticket.ticketID).qrcode({width:150,height:150,text:ticket.qrString}) ;
    }
  } ;

  $ionicModal.fromTemplateUrl('ticketModal.html', {
    scope: $scope,
    animation: 'slide-in-up',
    backdrop: 'static',
    backdropClickToClose:false,
    focusFirstInput: false 
  }).then(function(modal) {
    $scope.tixModal = modal;
  });
  
  $scope.openTicketModal = function(id) {
    $scope.tixModal.show() ;
  } ;
  $scope.closeTicketModal = function(id) {
     $scope.tixModal.hide() ;    
  }  ;

我的期望是用户单击按钮，模态打开，ng-repeat 触发......然后在

$last

上触发

genQRCode()

功能。

发生了什么导致

genQRCode()

在模式打开之前就被触发？

Answer 1

对于遇到此问题的任何人，我通过一些 hacky 修复解决了。

在 ng-repeat 上，我删除了

ng-init="$last && genQRCode()"

并在模态打开函数中添加了

$interval

来检查 ng-repeat 的最后一个元素是否已渲染到 DOM，以及何时渲染，然后触发 genQRCode() 函数。有用。这是我唯一能想到的工作 - 将 ng-init 或

directive

添加到 ng-repeat 没有帮助，因为当控制器/页面加载时，它们都触发了对

genQRCode()

的调用 - 以及模式DOM 元素尚未创建。:

  $scope.openTicketModal = function() {
    $scope.ticketInit = $interval(function() {
      $scope.refreshTickets = 1 ;
      var tid = $scope.club.tickets.length-1 ;
      if (angular.element('#ticketID_'+tid)) {
        $interval.cancel($scope.ticketInit) ;
        $scope.genQRCode() ;
      }
    },100) ;
    $scope.tixModal.show() ;
  }