Usando o roteador-ui com o modal Bootstrap-ui

Eu sei que isso já foi abordado várias vezes e a maioria dos artigos se refere a esse trecho de código: Janela modal com URL personalizado em AngularJS

Mas eu simplesmente não entendo. Eu não acho que isso seja muito claro. Eu também encontrei este jsfiddle que foi realmente ótimo, muito útil, exceto que isso não adiciona o URL e permite-me usar o botão Voltar para fechar o modal.


Edit: Isto é o que eu preciso de ajuda.

Então deixe-me tentar explicar o que estou tentando alcançar. Eu tenho um formulário para adicionar um novo item e tenho um link ‘adicionar novo item’. Eu gostaria que, quando clico em “adicionar novo item”, um modal seja exibido com o formulário que criei “add-item.html”. Este é um novo estado, portanto, a URL é alterada para / add-item. Eu posso preencher o formulário e, em seguida, optar por salvar ou fechar. Fechar, fecha o modal: p (como estranho). Mas eu também posso clicar novamente para fechar o modal e voltar para a página anterior (estado). Eu não preciso de ajuda com o Close neste momento, pois ainda estou lutando para obter o modal funcionando.


Este é o meu código como está:

Controlador de Navegação: (isso é mesmo o lugar correto para colocar as funções modais?)

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

É assim que estou ativando o modal:

  
  • New Item
  • new-item.html:

        

    Além disso, enquanto isso abre um modal, ele não fecha, já que não consegui resolver isso.

    É intuitivo pensar em um modal como o componente de exibição de um estado. Tome uma definição de estado com um modelo de visualização, um controlador e talvez algumas resoluções. Cada uma dessas características também se aplica à definição de um modal. Dê um passo adiante e vincule a input de estado a abrir a saída modal e de estado para fechar o modal, e se você puder encapsular todo o encanamento, terá um mecanismo que pode ser usado exatamente como um estado com ui-sref ou $state.go para a input e o botão Voltar ou mais gatilhos específicos do modal para a saída.

    Eu estudei isso bastante extensivamente , e minha abordagem foi criar um provedor de estado modal que poderia ser usado de forma análoga ao $stateProvider ao configurar um módulo para definir estados que estavam vinculados a modais. Na época, eu estava especificamente interessado em unificar o controle sobre a dispensa modal por meio de events de estado e modais, o que fica mais complicado do que o que você está pedindo, então aqui está um exemplo simplificado .

    A chave é tornar o modal a responsabilidade do estado e usar ganchos que o modal fornece para manter o estado em sincronia com as interações independentes que o suporte modal por meio do escopo ou de sua interface do usuário.

     .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(); } } }); }; }) 

    Entrada do Estado lança o modal. Saída do estado fecha. O modal pode fechar sozinho (ex: via clique do cenário), então você tem que observar isso e atualizar o estado.

    O benefício dessa abordagem é que seu aplicativo continua interagindo principalmente com estados e conceitos relacionados a estados. Se mais tarde você decidir transformar o modal em uma exibição convencional ou vice-versa, é necessário alterar muito pouco código.

    Aqui está um provider que melhora a solução @ nathan-williams passando a seção de resolve para o 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; } 

    então use assim:

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

    Eu respondi uma pergunta semelhante e dei um exemplo aqui:

    Janela modal com URL personalizado no AngularJS

    Tem um HTML completo de trabalho e um link para o plunker.

    O $ modal em si não tem uma function close (), quero dizer, se você console.log ($ modal), você pode ver que existe apenas uma function open ().

    Fechar o modal depende do object $ modalInstance, que você pode usar no seu modalController.

    Então isso: $ modal.close (resultado) não é realmente uma function!

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

      Object { open: a.$get 

    Existe alguma maneira de resolver isso, uma maneira é:

    Primeiro você deve definir um controlador em seu modal como este:

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

    E depois, mais 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 }); 
    Intereting Posts