How do I refresh/reload a modal view?

My application pulls YouTube videos into a list. Once you tap or click on an item it loads up a modal view with an iframe containing the YouTube video.

When I open the modal view for the first time it’s blank until the iframe loads. This is fine for now until I get a proper loading thing going. However, if I close the modal and then open the modal view again for a different video, then it has the last video already loaded in the iframe until it reloads itself 1~ second later.

Is there a way for me to either reset the modal so it’s blank upon re-open or start loading the iframe ahead of time?

This is the code for the iframe in the modal view:

<div class="videoWrapper">
  <iframe ng-src="{{currentURL | trusted}}" width="100%" height="100%" frameborder="0" /> 
</div>

See if you can tie into the event on your modal close and set $scope.currentUrl = {};

If you can wipe that object, and then maybe even use a timeout to close the modal it shouldn’t open with that previous video on it.

You have total control of the variables so just clear that out on close or before it opens and you should be good. If you could give us some more code on how you do the open and close then we can try and help you more.

I tried what you suggested into the modal code

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

But that didn’t work, unfortunately. To further test this solution I made a button on the actual modal view that sets “currentURL” to ‘’ (doing = {} causes an error) however that doesn’t update the iframe either.

Here’s the full HTML of my modal view

<script src="app.js"/>
<script src="js/YoutubeController.js"/>
<script src="js/YoutubeDirective.js"/>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/VideoModal.css" rel="stylesheet">
<html>
<ion-modal-view>

<div class="bar bar-header">
  <a class="button icon-left ion-chevron-left button-clear button-dark ion-close-round" ng-click="closeModal()"/>
  <h1 class="title">{{currentVideo.snippet.title}}</h1>
</div>  
	

<div class="videoWrapper" id="videoFrame">
  <!-- <iframe ng-src="{{getEmbedURL(currentVideo.id.videoId) | trusted}}" width="100%" height="100%" frameborder="0" />  -->
  <iframe ng-src="{{currentURL | trusted}}" width="100%" height="100%" frameborder="0" /> 
</div>

</ion-modal-view>
</html>

The index.html code that loads the YT videos:

  <div id="wrapper">
      <ul id="gallery">
        <li class="list card round" ng-repeat="v in videos" ng-if="v.id.kind != 'youtube#channel'">
              
          <a class="item item-body" ng-click="openModal($index)">

            <img class="full-image round" ng-src="{{v.snippet.thumbnails.medium.url}}" >
            <p style="text-align: center;">
              {{v.snippet.publishedAt | date}}
            </p>
          </a>
        </li>                
      </ul>
    </div> 

And my controller:

.controller('YoutubeCtrl', function($scope, $timeout, $http, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state) {
  
  // Load YouTube videos
  var apiKey = "<key>";
  var options = {
      location: 'yes',
      clearcache: 'yes',
      toolbar: 'no'
    };

  var currentVideo;
  var currentURL;
  var loadData = function() {
    $scope.showLoading();


    $http.get('<query>').
    success(function(data, status, headers, config) {
    $scope.videos = data.items;
    $scope.channelIndex = -1;
    console.log(data);
    for(var i=0; i<data.items.length; i++) {
    
       if(data.items[i].kind == "youtube#channelId")
       {
          $scope.channelIndex = i;
          console.log(i);
        }
    }
    }).
    error(function(data, status, headers, config) {

    }).
    finally(function() {
      $scope.hideLoading();
       // Stop the ion-refresher from spinning
      $scope.$broadcast('scroll.refreshComplete');
     }); 
  };


  $scope.refresh = function() {
    loadData();
  };


  $scope.getEmbedURL = function(video) {
    return "http://www.youtube.com/embed/"+video+"?controls=1";
  }

  $scope.toggleSideMenu = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };  

  // Loading
  $scope.showLoading = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };

  $scope.hideLoading = function(){
    $ionicLoading.hide();
  };
  loadData();

  $timeout(function() {

  }); 


  //Modal view
  $ionicModal.fromTemplateUrl('./Modals/VideoModal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });

  $scope.openModal = function(index) {
    $scope.currentVideo = $scope.videos[index];
    $scope.currentURL = $scope.getEmbedURL($scope.currentVideo.id.videoId);
    $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
    $scope.currentURL = {};
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });  

  $scope.test = function () {
    console.log($scope.currentURL);
    $scope.currentURL = "";
  }

})

.filter('trusted', ['$sce', function ($sce) {
    return function(url) {
        return $sce.trustAsResourceUrl(url);
    };
}]);

I use the code below on any sort of closing of the modal. See if that helps you.

$scope.listModal.remove();
1 Like

Try putting it in the $scope.closeModal() function. Then include $timeout in your controller as a service and do

$timeout(function(){
$scope.modal.hide();
});

I’ve tried both yours and hoang_mentorem’s suggestions but they didn’t reload the modal either. Maybe I need to find a way to refresh the iframe itself?

How did you eventually solve this?

calling $scope.modal.show() again after loadData() should work

It works for me. Thanks.