AngularJs ng-src in Iframe
angularjs, iframe, javascript
Solution
Most likely has to do with $sce not being configured to trust the external resource when interpolated... Try putting this in your controller (be sure to inject $sce service). trustAsResourceUrl is the method you will be interested in and you would pass the URL you want to use to that:
.controller("MainController", function ($scope, $sce) {
var urls = [];
//Need to trust resource to be able to interpolate, see $sce documentation
urls.push({domain: $sce.trustAsResourceUrl("http://angularjs.org")});
urls.push({domain: $sce.trustAsResourceUrl("http://www.jquery.com")});
$scope.urls = urls;
$scope.testAlert = function (value) {
alert(value);
}
});
See working fiddle.
Problem
I am attempting to set the ng-src of an iframe using a scope variable and it keeps coming through as blank. I tried this: ``` <div ng-repeat="url in urls"> <div ng-click="testAlert(url.domain)"> <iframe ng-src="{{ url.domain }}" ></iframe> <div style="text-align: center">{[ url.domain ]}</div> </div> </div> ``` The text shows up just fine, so I know the values are there as well as the click alerts the select domain. It is just the ng-src seems to end up blank and therefore doesn't pull up the site. If I hard code the ng-src to an external site it works.