angularjs - Angular-ui modal-pasar datos a modal

modal-dialog jquery-isotope

Question

Estoy intentando pasar algunos datos del modelo a una ventana modal cuando se abre. Cuando el usuario haga clic en un elemento, quiero tener abierta la ventana modal y mostrar información más detallada sobre lo que se hizo clic.

He creado un plunker que funciona como quiero, excepto para pasar los datos a la ventana modal.

Estoy tratando de pasar los datos usando ng-click:

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

Puede alguien ayudarme con esto? ¿O señalarme en la dirección correcta?

Answer 1

¿Qué tal this ?

Agregué el artículo a la resolución.

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

Y en el controller que estoy haciendo: $scope.item = item; despues de inyectar el item

Answer 2

He hecho un plunker para usted en http://plnkr.co/FzU5SOv3pdZmAPAIOzdo .

Desea resolver sus datos como lo hace con los elementos actualmente.

$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;
    }
  }
});

y en su controlador modal, asegúrese de incluir el objeto de tamaño resuelto ahora de la siguiente manera:

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'');
  };
});

Answer 3

Lo que funcionó para mí fue crear un objeto con resolve que devuelva un objeto que contenga las variables que quería compartir.

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

Para acceder al objeto shared , inclúyalo cuando defina su controlador de instancia modal.

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