ionModal not working when trying to resize the content or scroll to top

ionic-v1
1

Hi Everyone,

I am facing an issue when trying to use

  $ionicScrollDelegate.resize()
  $ionicScrollDelegate.scrollTop()

Basically, I have a couple of custom directive to handle pages (so sort of walkthrough, with next and previous buttons)
This is inside a modal (ion-nav-view) and the HTML for the template is this:

<ion-modal-view class="troubleshooting" ng-controller="troubleCtrl" >
    <ion-header-bar>
        <h1 class="title">Trouble</h1>
    </ion-header-bar>

    <ion-content class="container has-footer">

        <interrogator ng-if="activeSection.path === 'interrogator'" content-path="./assets/"
                                images-path="./assets/images/"
                                require-confirmation="{{modal.requireConfirmation}}"></interrogator>

        <solution-wizard solution-id="{{activeSection.solutionId}}" images-path="./assets/images/"
                                   ng-if="activeSection.path === 'solutionWizard'"></solution-wizard>


    </ion-content>
    <ion-footer-bar>
        <button class="button button-outline button-positive button-full main"
                ng-click="evtClickCloseWizard()">
            Close
        </button>
    </ion-footer-bar>

</ion-modal-view>

The buttons are emitting an event for when the page changes, and in the event, I call $ionicScrollDelegate.resize()
$ionicScrollDelegate.scrollTop(), like this:

$scope.$on('changePage', function() {
  $log.debug('resizing modal');
  $ionicScrollDelegate.resize();
  return $ionicScrollDelegate.scrollTop();
});

but it’s not working. If my content is long, and then I click next (or previous), I expect the new content to go back to the top,but it does not.

The content for the next page stays at the bottom, but as soon as I click on everywhere on the page, it then scrolls back to top.

Any suggestions on this? Thanks

2

Check if you have injected $ionScrllDelegate into the controller function or not

3

Is, it is inject properly

4

Hi, nick_heatgenius
Just put in your controller

$scope.$on('$ionicView.enter', function (event, data) {
         if(data.stateName=='app.article'){
              $ionicScrollDelegate.resize()
              $ionicScrollDelegate.scrollTop()
         }
     }

Here, app.article put your page state name Like app.xyz etc…

5

nope. I still have to click somewhere in the modal for it to resize properly. Also, my modal never changes the url, so on view enter would not fix the issue, as when I enter the view the position is correct, but it’s getting wrong when navigatin trought the modal itself

6

in this example you were change the state name ?
Like ,

        app.article....
        app.page....
        app.profile....

change state name

7

I am not changing the state name, and I don’t need to either. In my example, all it change it just the modal content, that’s it.