Schaltflächen funktionieren nicht innerhalb von $ timout/setTimeout | Angular und Ionic

Question

Ich möchte ein Popup anzeigen, aber mit ein bisschen Verzögerung. Das Problem ist, dass wenn ich das Popup nicht verzöge, die Tasten nicht funktionieren und wenn ich die Verzögerung hinzufüge, werden die Tasten nicht angezeigt! Ich habe online gelesen, dass das $ Timeout eine asynchrone Funktion ist, aber das ist nicht das Problem, oder?

Das Popup:

var myPopup = $ionicPopup.show({ 
    templateUrl: 'templates/components/welcomePopup.html', 
    scope: $scope, 
    buttons: [{ 
     text: 'Hejdå!', 
     type: 'custom-save-button', 
     onTap: function (e) { 
      $scope.showSpinner = true 

     } 
    }] 
}) 

Wie ich es verzögern:

$timeout(function(){ 
// Popup here 
}, 3000) 

Aber wenn eine Verzögerung meine Knöpfe Hinzufügen nicht angezeigt werden und ohne sie verzögern nichts funktioniert.

buttons: [{ 
    text: 'Hejdå!', 
    type: 'custom-save-button', 

Kennt jemand eine schnelle Lösung?

Dies ist der Code zur Zeit:

$timeout(function() { 
    var myPopup = $ionicPopup.show({ 
     templateUrl: 'templates/components/welcomePopup.html', 
     scope: $scope, 
     buttons: [{ 
      text: 'Hejdå!', 
      type: 'custom-save-button', 
      onTap: function (e) { 
       $scope.showSpinner = true 

      } 
     }] 
    }) 
}, 3000) 

Danke fürs Lesen! :)

Answer 1

Nun, ich habe es geschafft, die Hälfte des Problems zu lösen. Ich vermutete, dass das Problem etwas mit der $scope zu tun hatte und anscheinend war ich richtig.

So habe ich eine andere $scope zu:

var myPopup = $ionicPopup.show({ 
    templateUrl: 'templates/components/welcomePopup.html', 
    scope: $scope.$scope, // added $scope 
    buttons: [{ 
     text: 'Hejdå!', 
     type: 'custom-save-button', 
     onTap: function (e) { 
      $scope.showSpinner = true 

     } 
    }] 
}) 

Allerdings sind die Tasten noch nicht arbeiten!

Answer 2

Ihre Schaltfläche funktioniert nicht, weil Sie nicht mehr in Ihrem Steuerungskontext sind, wenn Sie im Timeout-Kontext etwas auf Ihrem $scope tun.

Die Variable showSpinner sollte eigentlich auf true eingestellt sein, wenn Sie auf die Schaltfläche tippen, das Problem ist, dass Angular nicht erkennt, dass der Wert geändert wurde, und daher die Ansicht nicht aktualisiert.

Um dies zu lösen, können Sie eine Aktualisierung erzwingen, indem Sie dieses Stück Code hinzufügen, nachdem Sie den Wert im Rahmen verändern:

if ($scope.$root.$$phase !== '$apply' && $scope.$root.$$phase !== '$digest') { 
    $scope.$apply(); 
} 

Der Zustand eine Auffrischanforderung zu verhindern, während es bereits einen im Gang . Daher glaube ich nicht, dass Sie einen $ Scope in Ihrem Haupt $ Scope übergeben müssen.

Hoffe, das hilft!