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

@jtmarmon wrote:

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

Posts: 2

Participants: 1

Read full topic