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);
};
}]);