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

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 https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views — Umidbek, Aug 07 '14 at 12:36
Apologies for the late response, please see my response to Joe's answer — Jonathan Bender, Sep 24 '14 at 14:57
There is some discussion about this problem https://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 — Umidbek, Sep 24 '14 at 22:29

score 1 · Answer 1 · answered Sep 23 '14 at 20:36

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',...

answered Sep 23 '14 at 20:36

Joe Naber

537
5
9

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. – Jonathan Bender Sep 24 '14 at 14:56

score 0 · Answer 2 · answered Apr 21 '15 at 22:50

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

}

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`. — Jonathan Bender, Apr 22 '15 at 16:23

UI-Router modal changes existing views

2 Answers2