uibmodal - modal open angularjs example

Usar el enrutador ui con el modal Bootstrap-ui

Question

Sé que esto se ha cubierto muchas veces y la mayoría de los artículos se refieren a este fragmento de código: Ventana modal con URL personalizada en AngularJS

Pero simplemente no lo entiendo No creo que eso sea muy claro en absoluto. También encontré este jsfiddle que fue realmente genial, muy útil, excepto que esto no agrega la url y me permite usar el botón Atrás para cerrar el modal.

Editar: Esto es con lo que necesito ayuda.

Así que déjame intentar explicar lo que estoy tratando de lograr. Tengo un formulario para agregar un nuevo artículo, y tengo un enlace ''agregar nuevo elemento''. Me gustaría que cuando hago clic en ''agregar nuevo elemento'', aparezca un modal con el formulario que he creado ''add-item.html''. Este es un nuevo estado por lo que la url cambia a / add-item. Puedo completar el formulario y luego elegir guardar o cerrar. Cerrar, cierra el modal: p (qué raro). Pero también puedo hacer clic nuevamente para cerrar el modal y regresar a la página anterior (estado). No necesito ayuda con Close en este momento ya que todavía estoy luchando para lograr que funcione el modo modal.

Este es mi código tal como está:

Controlador de navegación: (¿es este el lugar correcto para poner las funciones modales?)

angular.module(''cbuiRouterApp'')
  .controller(''NavbarCtrl'', function ($scope, $location, Auth, $modal) {
    $scope.menu = [{
      ''title'': ''Home'',
      ''link'': ''/''
    }];

    $scope.open = function(){

        // open modal whithout changing url
        $modal.open({
          templateUrl: ''components/new-item/new-item.html''
        });

        // I need to open popup via $state.go or something like this
        $scope.close = function(result){
          $modal.close(result);
        };
      };

    $scope.isCollapsed = true;
    $scope.isLoggedIn = Auth.isLoggedIn;
    $scope.isAdmin = Auth.isAdmin;
    $scope.getCurrentUser = Auth.getCurrentUser;

    $scope.logout = function() {
      Auth.logout();
      $location.path(''/login'');
    };

    $scope.isActive = function(route) {
      return route === $location.path();
    };
  });

Así es como estoy activando el modal:

 <li ng-show=''isLoggedIn()'' ng-class=''{active: isActive("/new-item")}''>
   <a href=''javascript: void 0;'' ng-click=''open()''>New Item</a>
 </li>

new-item.html:

<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 ng-click="ok()" class="btn btn-primary">OK</button>
  <button ng-click="close()" class="btn btn-primary">OK</button>
</div>

Además, si bien esto abre un modal, no lo cierra porque no pude resolverlo.

Answer 1

El $ modal en sí no tiene una función close (), me refiero a si console.log ($ modal), puede ver que solo hay una función open ().

Cerrar el modal depende del objeto $ modalInstance, que puede usar en su modalController.

Entonces esto: $ modal.close (resultado) no es realmente una función!

Aviso: console.log ($ modal); == >> resultado:

          Object { open: a.$get</k.open() }
           // see ? just open ! , no close !

Hay alguna manera de resolver esto, una forma es:

Primero debes definir un controlador en tu modal así:

   $modal.open({
      templateUrl: ''components/new-item/new-item.html'',
      controller:"MyModalController"
    });

Y luego, más tarde,:

    app.controller(''MyModalController'',function($scope,$modalInstance){
      $scope.closeMyModal = function(){
       $modalInstance.close(result);
        }
       // Notice that, This $scope is a seperate scope from your NavbarCtrl,
       // If you want to have that scope here you must resolve it

   });

Answer 2

Es intuitivo pensar en un modal como el componente de vista de un estado. Tome una definición de estado con una plantilla de vista, un controlador y tal vez algunos resuelve. Cada una de esas características también se aplica a la definición de un modal. Avance un paso más y enlace la entrada de estado para abrir el modal y la salida de estado para cerrar el modal, y si puede encapsular todas las tuberías, entonces tiene un mecanismo que puede usarse como un estado con ui-sref o $state.go a la entrada y el botón Atrás o más activadores específicos de modo para la salida.

He estudiado esto bastante extensamente , y mi enfoque fue crear un proveedor de estado modal que se pudiera usar de forma análoga a $stateProvider al configurar un módulo para definir estados que estaban ligados a modales. En ese momento, estaba específicamente interesada en unificar el control sobre el despido modal a través de eventos estatales y modales, que se vuelve más complicado de lo que está pidiendo, así que aquí hay un ejemplo simplificado .

La clave es hacer que el modal sea responsabilidad del estado y utilizar los ganchos que proporciona modal para mantener el estado en sincronía con las interacciones independientes que soporta el modal a través del alcance o su UI.

.provider(''modalState'', function($stateProvider) {
    var provider = this;
    this.$get = function() {
        return provider;
    }
    this.state = function(stateName, options) {
        var modalInstance;
        $stateProvider.state(stateName, {
            url: options.url,
            onEnter: function($modal, $state) {
                modalInstance = $modal.open(options);
                modalInstance.result[''finally''](function() {
                    modalInstance = null;
                    if ($state.$current.name === stateName) {
                        $state.go(''^'');
                    }
                });
            },
            onExit: function() {
                if (modalInstance) {
                    modalInstance.close();
                }
            }
        });
    };
})

La entrada de estado inicia el modal. La salida del estado lo cierra. El modal podría cerrarse por sí mismo (por ejemplo, mediante un clic de fondo), por lo que debe observarlo y actualizar el estado.

El beneficio de este enfoque es que su aplicación continúa interactuando principalmente con los estados y los conceptos relacionados con el estado. Si luego decide convertir el modal en una vista convencional o viceversa, entonces debe cambiar muy poco código.

Answer 3

Aquí hay un provider que mejora la solución de @ nathan-williams pasando la sección de resolve al controller :

.provider(''modalState'', [''$stateProvider'', function($stateProvider) {
  var provider = this;

  this.$get = function() {
    return provider;
  }

  this.state = function(stateName, options) {
    var modalInstance;

    options.onEnter = onEnter;
    options.onExit = onExit;
    if (!options.resolve) options.resolve = [];

    var resolveKeys = angular.isArray(options.resolve) ? options.resolve : Object.keys(options.resolve);
    $stateProvider.state(stateName, omit(options, [''template'', ''templateUrl'', ''controller'', ''controllerAs'']));

    onEnter.$inject = [''$uibModal'', ''$state'', ''$timeout''].concat(resolveKeys);
    function onEnter($modal, $state, $timeout) {
      options.resolve = {};

      for (var i = onEnter.$inject.length - resolveKeys.length; i < onEnter.$inject.length; i++) {
        (function(key, val) {
          options.resolve[key] = function() { return val }
        })(onEnter.$inject[i], arguments[i]);
      }

      $timeout(function() { // to let populate $stateParams
        modalInstance = $modal.open(options);
        modalInstance.result.finally(function() {
          $timeout(function() { // to let populate $state.$current
            if ($state.$current.name === stateName)
              $state.go(options.parent || ''^'');
          });
        });
      });
    }

    function onExit() {
      if (modalInstance)
        modalInstance.close();
    }

    return provider;
  }
}]);

function omit(object, forbidenKeys) {
  var prunedObject = {};
  for (var key in object)
    if (forbidenKeys.indexOf(key) === -1)
      prunedObject[key] = object[key];
  return prunedObject;
}

luego úsalo así:

.config([''modalStateProvider'', function(modalStateProvider) {
  modalStateProvider
    .state(''...'', {
      url: ''...'',
      templateUrl: ''...'',
      controller: ''...'',
      resolve: {
        ...
      }
    })
}]);

Answer 4

Respondí una pregunta similar y proporcioné un ejemplo aquí:

Ventana modal con URL personalizada en AngularJS

Tiene un HTML de trabajo completo y un enlace a Plunker.