Close Modal, dont' go back to index


#1

Hi there,
first i wanted to thank you for all the effort on ionic. I’m really exited about this project.

I got an app with different routes.
An “index” route and then a “list” route.
In my list route i got a list of items to scroll.

When i click on an item, i’m opening a Modal() “window” via:

$scope.openModal = function(index) {
    $scope.modal.show();
};

If i now close my Modal via:

$scope.closeModal = function() {
    $scope.modal.hide();
};

I’m getting redirected to my “index” route.
But i really need to stay on the “list” route, because otherwise the user loses the scrolling through the list of items and has to begin on top if again visiting the “list” route.

Is there a way to close a Modal() without getting redirected to the index route?

Best regards


Missing my Topic
#2

Hey @ageibert. I’m not sure why you’d be redirected in this case. Can you share what your markup looks like? Are you possibly using an anchor tag for these functions? Maybe try a button in that case.


#3

Hey Max,
may code looks like this:

HTML:

<a class="item item-thumbnail-left" href="#" ng-click="openModal($index)" ng-repeat="recipe in recipes">
  <img src="http://ionicframework.com/img/docs/nevermind.jpg">
  <h2>{{recipe.title}}</h2>
  <p>{{recipe.subtitle}}</p>
</a>

This is a list item an i want to open the modal if the item is clicked anywhere. I can’t use a button here…

The JS:

  //DETAIL  (MODAL WINDOW)
  Modal.fromTemplateUrl('templates/detail.html', function(modal) {
    $scope.modal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });
  $scope.openModal = function(index) {
    $scope.recipe = $scope.recipes[index];
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };

The modal is then closed via the automatically provided close button.


#4

Hmm. Did you try removing the href from the <a tag?


#5

Hi Max,
i removed the “href” attribute, but it redirected me back to the index again.

Now i substituted the “a tag” with a “div” and everything works fine.

Except the small arrow on the right side “>”, which i automatically established if one uses an “a tag”, isn’t shown anymore, but this is not so important :slight_smile:

I thank you!