Modal Not Working

1

I am trying to program a modal on one of my view, when I click the button that triggers it’s opening the screen will go dark but nothing will pop up. No errors in console.

controllers.js:

    angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {

})

.controller('PlaylistsCtrl', function($scope) {
    $('.owl-carousel').owlCarousel({
        loop: true,
        autoplay: true,
        items: 1,
        margin: 0,
        autoHeight: true,
        stagePadding: 0
    });
})

.controller('NewVidCtrl', function($scope, $ionicModal) {
  SC.get('/users/Monstercat/tracks', function(tracks) {
    $scope.songs = tracks
    console.log(tracks);
  });

  $scope.clicked = function(){
    $scope.openModal();
    SC.oEmbed('http://soundcloud.com/forss/flickermood', { auto_play: true }, function(oEmbed) {
        console.log('oEmbed response: ' + oEmbed);
      });
    }


  $ionicModal.fromTemplateUrl('templates/my-modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
})

Modal HTML:

<script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
<ion-view title="New Releases">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    Top Kek m80
    </ion-content>
</ion-view>

  </ion-modal-view>
</script>
2

I hate bumping but I really need help here and it’s been about 24h, any thoughts?

3

Please add a codepen/jsfiddle so we can help

4

Hi @drakee510, in your modal template there’s a <ion-view>.
It’s formally uncorrect, you should replace it with:

<script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar class="bar bar-header bar-positive">
      <div class="buttons">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </div>
      <h1 class="title">New Releases</h1>
    </ion-header-bar>
    Top Kek m80
    </ion-content>
  </ion-modal-view>
</script>

I noticed you’re using menu-close inside a modal, I don’t know if it exactly what you are trying to achieve. The modal DOM element is stored outside the side-menu-content DOM element.