example - menu angularjs bootstrap

Modal de Ui angular, enviando datos al controlador modal desde $ http

Question

Estoy usando la directiva modal angular-ui http://angular-ui.github.io/bootstrap/ .

He seguido el ejemplo del enlace de arriba.

Estos son mis datos que quiero enviar desde mi controlador:

ProductsFactory.getOneProduct().then(function(d){
  $scope.selectedProduct = d.data;
});

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

Y este es mi controlador modal:

var ModalInstanceCtrl = function ($scope, $modalInstance, selectedProduct) {

  console.log(selectedProduct);

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

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

El problema es que no puedo acceder al "producto seleccionado" en mi controlador modal. Sé que la razón es algo para hacer una llamada asíncrona de ancho y solo se puede acceder desde la GUI. ¿Pero cómo resuelvo este problema? ¿Cómo envío el "$ scope.selectedProduct" a mi ModalInstanceCtrl?

Answer 1

Puedes probar algo como

$scope.open = function () {
  var modalInstance = $modal.open({
    controller: ''ModalInstanceCtrl'',
    templateUrl: ''productDetail.html'',
    resolve: {
      items: function () {
        return ProductsFactory.getOneProduct();
      }
    }
  });
};

Básicamente, su $modal puede tomar una promesa, entonces ¿por qué no usarlo? Ahora el objeto debería estar disponible en el controlador cuando la promesa se resuelva. El ModalInstanceCtrl debe ser

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

ya que está resolviendo la propiedad items no la propiedad selectedProduct .