Modal Windows de AngularUI/Bootstrap

Introducción

$uibModal es un servicio para crear poderosos “Modal Windows” de AngularJS

$uibModalInstance es un servicio para utilizar un “Modal Window” previamente creado

$uibModal.open()

Crear una instancia de modal, la cual se asocia a un controlador y un template html

var modalInstance = $uibModal.open({
  templateUrl: "modalContent.html",
  controller: "ModalCtrl",
      ...
});
    
ModalCtrl($uibModalInstance)

En el controlador asociado al Modal (ModalCtrl), se utiliza el servicio $uibModalInstance que hace referencia a la instancia creada por el metodo $uibModal.open(): modalInstance < = > $uibModalInstance

app.controller('ModalCtrl', function ($uibModalInstance) { ... } 

ModalCtrl es un controlador independiente que no depende del Controlador índice, por lo tanto no se podrás utilizar los métodos definido en el IndexCtrl

Ejemplo: Creación

Partimos de una componente inicial, con su correspondiente Controlador (Component.js) y HTML (Component.html)

1) Definir controlador para el modal : path/to/ModalCtrl.js
app.controller('ModalCtrl', function ($scope, $uibModalInstance) { 

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

  $scope.cancel = function () { 
    $uibModalInstance.dismiss('cancel'); 
  }; 
}); 
2) Definir HTML para el modal: path/to/modal.html
< div class="modal-header"> 
    < h3 class="modal-title">I'm a modal!< /h3> 
< /div> 
3) Definir en Component.html el modal y acceso a botón para abrir el modal
< button ng-click="openModal()">Abrir< /button>

< script type="text/ng-template" id="modalContent.html"> 
  < div ng-include="'path/to/modal.html'">< /div> 
< /script>
4) Definir en Component.js la lógica del botón para abrir el modal (openModal)
  $scope.openModal = function () {

    var modalInstance = $uibModal.open({
      animation: true,
      templateUrl: "modalContent.html",
      controller: "ModalCtrl",
      size: "lg",
    });
  };
Alternativa al uso de script
Modificar Component.js:
  //***** Open modal *****
  $scope.openModal = function () {

    var modalInstance = $uibModal.open({
      animation: true,
      templateUrl: "path/to/modalContent.html",
      controller: "ModalCtrl",
      size: "lg",
    });
  };

Definir path/to/modalContent.html:
< div ng-include="'path/to/modal.html'">< /div> 


Ejemplo 2: Pasaje de parámetros

Siguiendo del ejemplo 1.

1) Definir en Controler.js un parámetro e incluirlo en openModal
  $scope.items = ['item1', 'item2', 'item3']; //variable que será enviada como parámetro al modal

  //Open modal
  $scope.openModal = function () {
    var modalInstance = $modal.open({
      animation: true,
      templateUrl: "modalContent.html",
      controller: "ModalCtrl",
      size: "lg",
      resolve: {
        items: function () { //"items" debe coincidir con el nombre del parámetro que se pasa a ModalCtrl
          return $scope.items;
        }
      }
    });
  };
2) Utilizar en ModalCtrl el parámetro definido en Controller.js
app.controller('ModalCtrl', function ($scope, $uibModalInstance, items) { 

  $scope.items = items;
  console.log($scope.items);

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

  $scope.cancel = function () { 
    $modalInstance.dismiss('cancel'); 
  }; 
}); 
3) Utilizar en modal.html el parámetro
< div class="modal-header"> 
    < h3 class="modal-title">I'm a modal!< /h3> 
< /div> 
< div class="modal-body"> 
	< ul> 
          < li ng-repeat="item in items"> 
            {{ item }}
          < /li> 
      < /ul> 
< /div> 
< div class="modal-footer"> 
    < button class="btn btn-primary" ng-click="ok()">OK< /button> 
    < button class="btn btn-warning" ng-click="cancel()">Cancel< /button> 
< /div> 

Ejemplo 3: Retorno de valores

Siguiendo del ejemplo 2

1) Definir en openModal el código para procesar la respuesta y asignarla a una variable
  $scope.items = ['item1', 'item2', 'item3']; //variable que será enviada como parámetro al modal
  $scope.selected = null; //variable que almacenará el retorno del modal.
    
  $scope.openModal = function () {

    var modalInstance = $modal.open({
      animation: true,
      templateUrl: "modalContent.html",
      controller: "ModalCtrl",
      size: "lg",
      resolve: {
        items: function () { //"items" debe coincidir con el nombre del parámetro que se pasa a ModalCtrl
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(
      function (selectedItem) {
        $scope.selected = selectedItem;
      }, 
      function () {
        console.log('Modal dismissed at: ' + new Date()); //se ejecuta al presionar cancel
      }
    );
  };
2) Definir en ModalCtrl el valor de respuesta y retornarlo
app.controller('ModalCtrl', function ($scope, $modalInstance, items) { 

  $scope.items = items;
  console.log($scope.items);

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

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

  $scope.cancel = function () { 
    $modalInstance.dismiss('cancel'); 
  }; 
});
3) Modificar modal.html para seleccionar el item correspondiente
< div class="modal-header"> 
  < h3 class="modal-title">I'm a modal!< /h3> 
< /div> 

< div class="modal-body"> 
  < ul> 
    < li ng-repeat="item in items"> 
      < a ng-click="selected.item = item">{{ item }}< /a> 
    < /li> 
  < /ul> 
  Selected: < b>{{ selected.item }}< /b> 
< /div> 

< div class="modal-footer"> 
  < button class="btn btn-primary" ng-click="ok()">OK< /button> 
  < button class="btn btn-warning" ng-click="cancel()">Cancel< /button> 
< /div>

Fuente

Angular Bootstrap

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *