Ios-like modal view controller causes document query selectors to fail

ionic-v1
1

I have an ionic modal presented by FooController (note that it’s a different controller than the one for the modal) like so:

$ionicModal.fromTemplateUrl('templates/my-modal.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal
  $scope.modal.show()
})

The modal looks like this:

<ion-modal-view ng-controller="EditCtrl" class="modal">
  <ion-header-bar class="modal-header-bar">
    <button class="button button-clear">Cancel</button>
    <h1 class="title">Edit</h1>
    <button class="button button-clear">Save</button>
  </ion-header-bar>
  <ion-content>
    <div id="foo"></div>
  </ion-content>
</ion-modal-view>

Then in edit_controller.js:

document.getElementById('foo')

Returns null. How can I have document refer to the currently shown modal?

For reference - my goal here is to achieve this ios design pattern of performing an atomic action in a modal

Thanks in advance for any help! Happy to clarify if needed

2

Ok. Solved this by changing
document.getElementById('foo')

to

setTimeout(function() { document.getElementById('foo') }, 0)

and it worked. Clearly there’s some weird thing going on with the event loop. Would greatly appreciate an explanation on why this happens. Feel free to crosspost it as an answer to my S/O question too!

1 Like