Modal navigation to new url


#1

I have a modal dialog. The modal has a list of people. By clicking on a specific person i want to navigate to another page in my app. For some reason if I don’t include the page in an in the footer of my app, the navigation never happens. I should mention that I am using tab navigation in the footer of the app, but it seems weird to me that I need to define all my pages as tabs in the footer in order to navigate to them. Any ideas on how i can navigate to a page from my modal dialog without having to add the page as a tab in the footer?

Also i checked the network traffic and the pages does return a 200, it just never shows in the app.


#2

You should hide and remove the modal. Then navigate to another page/state.


#3

I just tried hiding the modal and then removing it and then navigating using $state.go() and it still doesn’t work. Thanks tho!


#4

Put a codepen…


#5

here’s the codepen: http://codepen.io/anon/pen/kbJwH

launching the modal and then clicking on contacts should redirect you to a ‘new contacts’ page. but in reality nothing happens except the modal hiding …


#6

okey there are some problems.

First the State:
you used this state:

.state('tabs.newcontact',{
    url: "/newcontact",
    views: {
      'newcontact-tab' :{
        templateUrl: "templates/newcontact.html"
      }
    }
  })

technically there is no problem,
the problem in your codepen was you do not have an tab called newcontact-tab

Second the controller:
i would recommend not using $ionicModal as parameter in a function, because its a controller/service/directive from Ionic.
Also try to init the variables you are using in a controller.

$scope.modal = {};
$ionicModal.fromTemplateUrl('modal.html', function(modal){
    $scope.modal = modal;
  },{
    scope: $scope,
    animation: 'slide-in-right'
  });

then the methodes thats called when clicking on contacts:

$scope.contactsClick = function(){
    $scope.modal.hide();
    $state.go('tabs.newcontact');
  };

you simply forgot to tell $state.go where it should go :smiley:

and now it should work example: http://codepen.io/Auro/pen/wehpl


#7

thanks! can’t believe i missed that one! :smile: