2

When I click on the link << Add Call >> the modal is opened with custom URL but in the background is a blank view, I want the previous state to still appearing behind the modal when opened

header.html

<li><a ui-sref="new-call">Add Call</a></li>

app.js

.state('new-call', {
    url: '/new-call',
    resolve: {
      PreviousState: [
        "$state",
        function ($state) {
          var currentStateData = {
            Name: $state.current.name,
            Params: $state.params,
            URL: $state.href($state.current.name, $state.params)
          };
          return currentStateData;
        }
      ]
    },
    onEnter: ['PreviousState', '$stateParams', '$state', '$modal', '$location', 
    function(PreviousState, $stateParams, $state, $modal, $location){
      $modal.open({
        templateUrl: 'views/new-call.html',
        controller: 'NewCallCtrl'
      }).result.finally(function(){
        $state.go(PreviousState.Name, PreviousState.Params);
      });
    console.log($stateParams);

    }]
  })
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
Nariman Adam
  • 31
  • 4

1 Answers1

0

I would suggest, to make that state 'new-call' a child of all 'calls' 

.state('calls', {
    url: '/calls',
    ...

.state('calls.new-call', {
    url: '/new-call',
    ...

Now, if user is going to create new call, he will already be on a state 'calls' - that way, its view won't disapear, just modal will be opened...

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Thanks for your contribution Radim :) I would like to make it not specific to a state as the link is in the header of the website and the user should be able to navigate to it anywhere also the url should be http://website.com/modalUrl – Nariman Adam Oct 25 '15 at 10:04
  • The point is - UI-Router shows just current state hierarchy. The rest is removed...by design. Imagine that you do not have 'new-calll' state modal.. just usual one, and the other state *(you've came from)* will stay rendered. Wrong ;) So, solution is - move your modals to your states as a child. It could be done easily during config *(some iteration overs tates which should be extended with child)* or with decorators e.g. [here](http://stackoverflow.com/a/30395579/1679310) or [there](http://stackoverflow.com/a/33116918/1679310) – Radim Köhler Oct 25 '15 at 10:08