web-dev-qa-db-fra.com

Angular-ui modal - passer des données en modal

J'essaye de passer quelques données de modèle dans une fenêtre modale quand elle est ouverte. Lorsque l'utilisateur clique sur un élément, je souhaite ouvrir la fenêtre modale et afficher des informations plus détaillées sur ce qui a été cliqué.

J'ai créé un plunker qui fonctionne comme je le souhaite, sauf pour passer les données dans la fenêtre modale.

J'essaie de transmettre les données en utilisant ng-click:

<img ng-src="{{item.picture}}" width="100" ng-click="open(item)"/>

Est-ce que quelqu'un peut m'aider avec ça? ou me diriger dans la bonne direction?

angularjsmodal-dialogangular-uijquery-isotope
20
mcneela86

Que diriez-vous this ?

J'ai ajouté l'élément à la résolution

resolve: {
    items: function () {
        return $scope.items;
    },
    item: function(){
        return size;
    }
}

Et dans le controller je fais: $scope.item = item; après avoir injecté le item

32
Mati Tucci

J'ai fait un plunker pour vous à http://plnkr.co/FzU5SOv3pdZmAPAIOzdo .

Vous souhaitez résoudre vos données un peu comme vous le faites actuellement.

$scope.open = function (size) {

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    items: function () {
      return $scope.items;
    },
    size: function() {
      console.log('size: ', size);
      return size;
    }
  }
});

et dans votre contrôleur modal, assurez-vous d'inclure l'objet de taille maintenant résolu comme suit:

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, size) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };
  $scope.size = size;

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});
15
rtucker88

Ce qui a fonctionné pour moi a été de créer un objet dans resolve qui renvoie un objet contenant les variables que je voulais partager.

resolve: {
  shared: function(){
    return {
      name: 'Spencer',
      numbers: [1, 2, 3]
    }
  }
}

Pour accéder à l'objet shared, incluez-le lors de la définition de votre contrôleur d'instance modale.

app.controller('ModalInstanceController', function($scope, shared, $uibModalInstance,
0
spencer.sm