单击按钮后重新加载模态窗口

时间:2017-01-03 12:23:22

标签: javascript angularjs twitter-bootstrap

单击按钮后如何重新加载模态窗口? 这里有模态窗口的控制器

(function(){
  'use strict';

  angular
    .module('casalibroApp')
    .controller('ModificaAggiungiLibroController', ModificaAggiungiLibroController);

  ModificaAggiungiLibroController.$inject = ['$uibModalInstance', 'entity', '$scope', 'Libro', 'CancellaAutore', '$state'];

  function ModificaAggiungiLibroController($uibModalInstance, entity, $scope, Libro, CancellaAutore, $state){
    var vm = this;
    vm.itemsPerPage = 1;
    vm.currentPage = 1;
    vm.nuovoAutore = false;

    vm.libro = entity;

    vm.clear = function() {
        $uibModalInstance.dismiss('cancel');
    }

    vm.save = function() {
        vm.isSaving = true;
        if (vm.libro.id !== null) {
            Libro.update(vm.libro).$promise
              .then(function(result){
                $scope.$emit('casalibroApp:libroUpdate', result);
                $uibModalInstance.close(result);
                vm.isSaving = false;
              }, function(){
                vm.isSaving = false;
              });
        }else{
          Libro.save(vm.libro).$promise
          .then(function(result){
            $scope.$emit('casalibroApp:libroUpdate', result);
            $uibModalInstance.close(result);
            vm.isSaving = false;
          }, function(){
            vm.isSaving = false;
          });
        }
    }

    vm.test = function(autoreId, libroId){
      console.info("AUTORE ID: ", autoreId);
      console.info("LIBRO ID: ", libroId);
      CancellaAutore.get({libroId: libroId, autoreId: autoreId}).$promise
        .then(function(){
          console.info("CURRENT: ", $state.current);
          $state.go('welcome.book-edit', {}, {reload: true});
        }, function(error){
          AlertService.error(error.data.message);
        });
    }
  }
})();

函数vm.test是单击按钮时运行的操作。该功能正常工作,并重新加载

$state.go('welcome.book-edit', {}, {reload: true});

但是这会在另一个模态窗口上打开一个新的模态窗口

模态窗口的HTML

<form name="editForm" role="form" novalidate ng-submit="vm.save()" show-validation>
  <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
              ng-click="vm.clear()">
              &times;
      </button>
      <div ng-switch="vm.libro.id">
        <h4 ng-switch-default class="modal-title" id="windowTitle">
          Modifica libro {{vm.libro.titolo}}
        </h4>
        <h4 class="modal-title" id="windowTitle" ng-switch-when="null">
          Aggiungi un libro alla libreria
        </h4>
      </div>
  </div>
  <div class="modal-body">
  <uib-tabset active="activeForm">
    <uib-tab index="0" heading="Libro">
      <ng-form name="nestedForm">
        <div class="form-group" ng-show="vm.libro.id != null">
          <label for="libroId">ID</label>
          <input type="text" class="form-control" ng-model="vm.libro.id" readonly="true" name="libroId"/>
        </div>
        <div class="form-group">
          <label for="libroTitolo">Titolo</label>
          <input type="text" name="libroTitolo" class="form-control" ng-model="vm.libro.titolo"/>
        </div>
        <div class="form-group">
          <label for="libroGenere">Genere</label>
          <input type="text" name="libroGenere" class="form-control" ng-model="vm.libro.genere.genere"/>
        </div>
        <div class="form-group">
          <label for="libroPagine">Numero di pagine</label>
          <input type="text" name="libroPagine" class="form-control" ng-model="vm.libro.numero_pagine"/>
        </div>
        <div class="form-group">
          <label for="libroAnnoPubblicazione">Anno di pubblicazione</label>
          <input type="text" class="form-control" name="libroAnnoPubblicazione" ng-model="vm.libro.anno_pubblicazione"/>
        </div>
        <div class="form-group">
          <label for="libroDescrizione">Descrizione</label>
          <textarea rows="5" cols="65" maxlength="250" ng-trim="false" ng-model="vm.libro.descrizione" name="libroDescrizione" class="form-control"></textarea>
            <p>Totale caratteri inseriti: {{vm.libro.descrizione.length}}/250</p>
        </div>
        <div class="form-group">
          <label for="libroCopertina">Copertina</label>
          <input type="text" class="form-control" name="libroCopertina" ng-model="vm.libro.copertina_url"/>
        </div>
      </ng-form>
    </uib-tab>
    <uib-tab index="1" heading="Autore" disable="vm.libro.titolo === null">
      <div ng-repeat="autore in vm.libro.autores.slice(((vm.currentPage-1)*vm.itemsPerPage), ((vm.currentPage)*vm.itemsPerPage))">
        <div class="form-group">
          <label for="autoreNome">Nome</label>
          <input type="text" name="autoreNome" class="form-control" ng-model="autore.nome"/>
        </div>
        <div class="form-group">
          <label for="cognomeAutore">Cognome</label>
          <input type="text" class="form-control" name="cognomeAutore" ng-model="autore.cognome"/>
        </div>
        <div class="form-inline">
          <button type="button" class="btn btn-danger" ng-show="vm.libro.autores.length > 0" ng-click="vm.test(autore.id, vm.libro.id)">
            <span class="glyphicon glyphicon-remove-circle"></span>
            &nbsp;
            <span>Elimina autore</span>
          </button>
          <button type="button" class="btn btn-primary" ng-click="vm.nuovoAutore=true">
            <span class="glyphicon glyphicon-plus"></span>
            &nbsp;
            <span>Aggiungi autore</span>
          </button>
        </div>
      </div>
      <uib-pagination total-items="vm.libro.autores.length" ng-model="vm.currentPage" ng-change="vm.transition()" boundary-link-numbers="true" previous-text="Previous" next-text="Next" first-text="First" last-text="Last" items-per-page="vm.itemsPerPage"></uib-pagination>
    </uib-tab>
    <uib-tab index="2" heading="Casa Editrice" disable="vm.libro.titolo === null">
      <div class="form-group" ng-show="vm.libro.id != null">
        <label for="casaEditrice">Nome</label>
        <input type="text" name="casaEditrice" class="form-control" ng-model="vm.libro.casaEditrice.nome"/>
      </div>
      <div class="form-row" style="margin-top: 5px;">
        <button type="button" class="btn btn-primary" ng-show="vm.libro.id == null">
          <span class="glyphicon glyphicon-plus"></span>
          &nbsp;
          <span>Aggiungi casa editrice</span>
        </button>
      </div>
    </uib-tab>
  </uib-tabset>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clear()">
        <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span>Cancel</span>
    </button>
    <button type="submit" ng-disabled="editForm.$invalid || vm.isSaving" class="btn btn-primary">
        <span class="glyphicon glyphicon-save"></span>&nbsp;<span>Save</span>
    </button>
</div>
</form>

0 个答案:

没有答案