UI-Router modal changes existing views

Question

I'm trying to use ui-router to trigger a modal for a certain state, rather than changing the entire view. To do this, I implemented a slightly adapted form of what is given in the FAQ, as I'm using angular-foundation rather than bootstrap. When I trigger the state, the modal is shown, however it also clears out the existing views even though no views are specified in my state:

.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
)

Should I be configuring views/parents for this state e.g. <div ui-view='modal'></div> or parent:'main' (I'd like it to be accessible from any state without changing that state when toggled)?

Kreg

In FAQ Example they use .state("items.add", {}), so when you trigger items.add state, items won't be changed. In your case you trigger state without parent, so you should use github.com/angular-ui/ui-router/wiki/Multiple-Named-Views – Buoyancy

Apologies for the late response, please see my response to Joe's answer – Kreg

There is some discussion about this problem github.com/angular-ui/ui-router/issues/1014 , and there are some answers to solve the it. But if you have not too many views with modals, i would advise you to hardcode with some constant values – Buoyancy

Answer 1

specify that it has a parent state by using the "." naming convention. (replace "parentState" with the name of the actual parent): .state('parentState.selectModal',...

Shirleenshirlene

The . naming convention is simply another way of stating the parent-child relationship, changing which syntax is used doesn't have any effect on that relationship. The real issue here is that I would like the state to have the parent of "whatever is active right now" so that the modal gets its own state on top of the current one. Specifying the parent of main will remove whatever other states are active, and simply including the modal link in the base to make it available globally doesn't allow for the use of states to toggle it. – Kreg

Answer 2

Have you considered putting the modal code into a service and just calling that service in each controller that uses the modal?

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

}

Iliac

The core of this issue is trying to give the modal its own state on top of the existing one. Your proposed solution would bring up the modal, but would not push on a new state, e.g. resources -> resources/new. – Kreg

Ah, I see. That does complicate it. – Iliac