web-dev-qa-db-fra.com

Angular UI Bootstrap $ scope. $ ModalInstance.close causes: Impossible de lire la propriété 'valeur' ​​de non définie

J'ai quelques modaux, 2 fonctionnent parfaitement, 1 reçoit cette exception lors de la fermeture . (Il parvient à fermer le modal, mais angular déconnecte cette exception).

J'ai regardé de plus près et, le $modalInstance est défini dans la méthode close, mais openedWindows.get($modalInstance) renvoie undefined.

Comment puis-je réparer cela?

jqueryangularjsangular-ui
10
Baconbeastnz

C'est un bogue dans $ modal dans v0.10.0. Voir ce problème de github , et sera corrigé dans la prochaine version.

@IvanZh a fourni une réponse à une question similaire ici - Ignorer le modal angulaire lors du changement d'URL - erreurs dans la console

Dans votre contrôleur, une fois que vous avez effectué $ modal.open, ajoutez un bloc finally où vous avez explicitement défini la modalInstance sur null. plunkr pour licencier modal sur le changement d'URL est disponible dans la question ci-dessus. Le vôtre devrait être très similaire.

$scope.modalInstance = $modal.open({
    templateUrl: 'add.html',
    controller: 'AddCtrl'
  });
  $scope.modalInstance.result.then(function() {
    console.log('Success');
  }, function() {
    console.log('Cancelled');
  })['finally'](function(){
    $scope.modalInstance = undefined  // <--- This fixes
  });
16
Narayana

$ La documentation ( https://angular-ui.github.io/bootstrap/ ) indique: De plus, la portée associée au contenu de modal est complétée par 2 méthodes:

$ close (résultat)

$ rejeter (raison).

Cependant, le javascript ne correspond pas à cela et l'injection d'une $ modalInstance ne fonctionne pas .Cela a fonctionné pour moi:

app.controller('myController', [ '$scope', 
function ( $scope) {
..

 $scope.addClient = function () {
   $scope.$close(); // or $scope.$dismiss();
 }
}
1
Damian Green

Vous pouvez également obtenir cette erreur si vous essayez de fermer immédiatement le modal $. Je me suis heurté à cela quand j'ai accidentellement oublié d'inclure un argument de délai dans mon appel à $ timeout. Voici le mauvais code:

var modal = $modal.open({
  templateUrl: 'static/partials/simple.dialog.html',
  controller: function($scope) {
    $scope.opts = opts;
  }
});

$timeout(function() {
  simple.close();
});

Cela a été corrigé en ajoutant le délai d'attente:

$timeout(function() {
    simple.close();
}, opts.timeout);
1
user745852

Cette méthode n'a pas bien fonctionné pour moi. 

Moi aussi, j'avais des messages «valeur» non définis, issus d'une série de dialogues basés sur l'état de l'application. Une des boîtes de dialogue était une icône en rotation "Votre demande est en cours de traitement", qui était fermée dans l'étendue parent une fois la demande $ http résolue. 

Mais il ne fermerait pas en utilisant ceci et le résultat susmentionné.

if ($scope.modalInstance) {
     $scope.modalInstance.dismiss();
}

...

$scope.modalInstance.result.then(function() {
    console.log('Success');
  }, function() {
    console.log('Cancelled');
  })['finally'](function(){
    $scope.modalInstance = undefined;
  });

Tout a commencé à fonctionner quand je suis passé à:

$scope.modalInstance.result.then(function() {
        ...
       $scope.modalInstance = undefined;
}, function() {
       ...
       $scope.modalInstance = undefined;
});

Peut-être que l'erreur était que $ scope.modalInstance était défini sur undefined sans jamais fermer/fermer l'instance d'origine.

0
Parker Heindl