Refreshing iframe contents in AngularJS
Solved it by a hack suggested in Reload an iframe with jQuery
$scope.refreshIframe = function() {
var iFrame = $document.find("anIframe");
iFrame.attr("src",iFrame.attr("src"));
};
As Paulo Scardine said, the right way to do it would be through a directive cause you shouldn't use controllers to manipulate DOM.
Something like this one could do :
.directive('refreshable', [function () {
return {
restrict: 'A',
scope: {
refresh: "=refreshable"
},
link: function (scope, element, attr) {
var refreshMe = function () {
element.attr('src', element.attr('src'));
};
scope.$watch('refresh', function (newVal, oldVal) {
if (scope.refresh) {
scope.refresh = false;
refreshMe();
}
});
}
};
}])
Which could then be used like :
<iframe refreshable="tab.refresh"></iframe>
And :
$scope.refreshIframe = function(){
$scope.tab.refresh = true;
}
Another hack-ish solution: if you don't want to create a directive but want to stick to the good practices of not manipulating the DOM in controller. Keep the url in an array and use ng-repeat to render the iFrame: View:
<iframe ng-repeat="url in vm.url" ng-src="{{url}}" />
Controller:
vm.url = ['http://google.com'];
So, every time you set the value of the vm.url, angular will re-render the iFrame.