Angular/Ionic 代码调用函数尚未加载

Question

我花了很长时间才弄清楚发生了什么。一个标准的 $ionicPopover 被调用，我得到一个

无法读取未定义的属性“显示”

输入控制器后，它会立即检查$stateParm - 如果已设置，则启动弹出框。但问题是 $ionicPopover 模板尚未加载到 $scope 中，所以$scope.popover.show() 正在返回错误。

当我添加了一个 setTimeout(function() { $scope.popover.show(); },2000) ; 时 - 延迟了足够长的时间以将弹出框加载到范围中并允许它启动。

尽管这个创可贴有效，但我不喜欢使用这种方法。我可以使用什么其他方法来确保 $ionicPopover/$ionicModal 都已加载其他代码被允许执行和引用它们？

  $ionicPopover.fromTemplateUrl('pushPopover.html', {
    scope: $scope,
    focusFirstInput:false
  }).then(function(popover) {
    $scope.popover = popover;
  });

  $scope.openPopover = function() {
    $scope.popover.show();  // calls before popover is loaded causing error
  }
  $scope.closePopover = function() {
    $scope.popover.hide();
  }
  if ($stateParams.pushAction == 1) {
    $scope.pushSub = $stateParams.pushSub ;
    $scope.pushMsg = $stateParams.pushMsg ;
    $scope.pushCode = $stateParams.pushCode ; 
    $scope.openPopover() ;  
  }  

为了让它工作，我不得不故意用一个草率的超时来延迟通话：

  if ($stateParams.pushAction == 1) {
    $scope.pushSub = $stateParams.pushSub ;
    $scope.pushMsg = $stateParams.pushMsg ;
    $scope.pushCode = $stateParams.pushCode ; 
    setTimeout(function() {
      $scope.openPopover() ;
    },2000) ;
  }  

Answer 1

一种技术是存储promise和链：

var popoverPromise = $ionicPopover.fromTemplateUrl(
  'pushPopover.html',
  {
    scope: $scope,
    focusFirstInput:false
});

popoverPromise.then(function(popover) {     
    $scope.popover = popover;
});

$scope.openPopover = function() {
    ̶$̶s̶c̶o̶p̶e̶.̶p̶o̶p̶o̶v̶e̶r̶.̶s̶h̶o̶w̶(̶)̶;̶ ̶ ̶/̶/̶ ̶c̶a̶l̶l̶s̶ ̶b̶e̶f̶o̶r̶e̶ ̶p̶o̶p̶o̶v̶e̶r̶ ̶i̶s̶ ̶l̶o̶a̶d̶e̶d̶ ̶c̶a̶u̶s̶i̶n̶g̶ ̶e̶r̶r̶o̶r̶
    popoverPromise.then(function(popover) (
        popover.show(); //called after popover loaded
    }); 
};

$scope.closePopover = function() {
    ̶$̶s̶c̶o̶p̶e̶.̶p̶o̶p̶o̶v̶e̶r̶.̶s̶h̶o̶w̶(̶)̶;̶
    popoverPromise.then(function(popover) {
        popover.hide();
    });
};

服务立即返回承诺，而.then 块等待来自服务器的数据。