2

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.

Adam
  • 3,615
  • 6
  • 32
  • 51

1 Answers1

6

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.

Patrick
  • 6,828
  • 3
  • 23
  • 31
  • Also had to update inline to.. Notice the bracket instead of brace...not sure why. But works now. – Adam Jul 09 '14 at 19:45
  • Is there somewhere in your app that has configured $interpolateProvider start and end symbol to be "{[" and "]}"? The "double-mustache", {{}} - should work as it does in the fiddle example. – Patrick Jul 09 '14 at 20:06
  • you are absolutely right. I will have to track down why it is done that way. Thanks for the help! – Adam Jul 09 '14 at 20:39