Modifiche dell'interfaccia UI-Router delle viste esistenti

Question

Sto provando a utilizzare l'interfaccia router per attivare una modale per un determinato stato, piuttosto che modificare l'intera vista. Per fare questo, ho implementato una forma leggermente adattata di what is given in the FAQ, poiché sto usando angular-foundation piuttosto che bootstrap. Quando ho innescare la condizione, il modal è mostrato, tuttavia, cancella anche il punto di vista già esistenti, anche se senza vista sono specificate nel mio stato:

.state('selectModal', 
    onEnter: ($modal, $state, $sessionStorage) -> 
    $modal.open(
     templateUrl: 'views/select_modal.html' 
     windowClass: 'tiny' 
     controller: 'SelectCtrl' 
     resolve: 
     options: (Restangular) -> Restangular.all('options').getList() 
    ) 
    .result.then (result) -> 
     $sessionStorage.selected = result 
     $state.go 'resource', id: result.id 
) 

Dovrei configurando viste/i genitori di questo stato per esempio <div ui-view='modal'></div> o parent:'main' (Mi piacerebbe che fosse accessibile da qualsiasi stato senza modificare tale stato quando attivato)?

Answer 1

specificare che ha uno stato padre utilizzando "." convenzione di denominazione. (sostituisci "parentState" con il nome del genitore effettivo): .state ('parentState.selectModal', ...

Answer 2

Hai pensato di inserire il codice modale in un servizio e di chiamare il servizio in ogni controller che utilizza modale?

angular.module('app').service('modal', function(){ 

    function open(){ 
     $modal.open(
      templateUrl: 'views/select_modal.html', 
      windowClass: 'tiny', 
      controller: 'SelectCtrl', 
      resolve: { 
       options: function(Restangular) { Restangular.all('options').getList() } 
      } 
     ) // .result... if it's generic, otherwise put it in the controller 
    } 
}); 

angular.module('myapp').controller('main', function($scope, modal){ 

    modal.open().result.then(function(result) { 
     $sessionStorage.selected = result; 
     $state.go('resource', id: result.id); 
    }); 

}