web-dev-qa-db-fra.com

Résolution modulaire Angular-UI

Chers tous, je suis nouveau à Angularjs, je crée un modal avec Angular. Un des exemples que j'ai trouvé en ligne est celui que j'ai du mal à comprendre

$scope.checkout = function (cartObj) {
  var modalInstance = $modal.open({
  templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',
  controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
  }],
  resolve : { // This fires up before controller loads and templates rendered
    cartObj : function() {
       return cartObj;
    }
  }
});

Ce qui me déroute, c'est que cartObj que j'ai déjà reçu comme paramètre pour ma fonction est passé à mon contrôleur via l'injection de dépendances. Cependant, pourquoi je dois créer une fonction nommée cartObj et renvoyer cette variable. Cela semble déroutant. Quelqu'un peut-il aider s'il vous plait ?

javascriptangularjsangular-uiangular-ui-bootstrap
16
Muhammad Raihan Muhaimin

Voici la ventilation ligne par ligne:

$scope.checkout = function (cartObj) {

Une variable $ scope nommée checkout est en cours de création et fait référence à une fonction afin que vous puissiez l'appeler dans la vue sous la forme checkout() (par exemple à partir d'un bouton avec ng-click = "checkout").

Cette fonction est passée un service appelé cartObj.

var modalInstance = $modal.open({

Une variable appelée modalInstance est utilisée pour appeler la méthode ouverte du service $ modal.

L'interface utilisateur Bootstrap $ le service modal renvoie une instance modale. La méthode ouverte reçoit un objet qui définit la configuration de l'instance modale comme suit:

templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',

Cela signifie que l'instance modale doit utiliser le modèle trouvé à l'URL respective.

controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
  }],

Cela crée un contrôleur pour l'instance modale qui reçoit la portée $, le service $ modalInstance et, surtout, le service cartObj résolu.

Les services sont des singletons utilisés pour partager des données entre les contrôleurs. Cela signifie qu'il existe une version du service cartObj et si un contrôleur la met à jour, un autre contrôleur peut interroger le service et obtenir les données mises à jour par tout autre contrôleur. C'est très bien, mais si une variable doit être initialisée avec une certaine valeur du service lorsque le contrôleur se charge, elle retournera indéfinie car elle doit d'abord demander puis attendre pour récupérer les données. C'est là que la résolution entre en jeu:

  resolve : { // This fires up before controller loads and templates rendered
    cartObj : function() {
       return cartObj;
    }
  }
});

La raison ici d'utiliser la résolution est probablement parce que le modèle lui-même dépend de la disponibilité de certaines données de cartObj QUAND le modèle est chargé. Resolve résoudra les promesses AVANT que le contrôleur ne charge afin que, le cas échéant, les données soient là et prêtes. Fondamentalement, la résolution simplifie l'initialisation du modèle à l'intérieur d'un contrôleur car les données initiales sont données au contrôleur au lieu que le contrôleur ait besoin de sortir et de récupérer les données.

Le cartObj résolu est ce qui est transmis à la modalInstance et est donc accessible dans le contrôleur en tant que: cartObj. someproperty .

29
jme11