How to set an iframe src attribute from a variable in AngularJS

angularjs, angularjs-directive, html, iframe, javascript

Solution

I suspect looking at the excerpt that the function `trustSrc` from `trustSrc(currentProject.url)` is not defined in the controller.

You need to inject the `$sce` service in the controller and `trustAsResourceUrl` the `url` there.

In the controller:

function AppCtrl($scope, $sce) {
    // ...
    $scope.setProject = function (id) {
      $scope.currentProject = $scope.projects[id];
      $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
    }
}

In the Template:

<iframe ng-src="{{currentProjectUrl}}"> <!--content--> </iframe>

Problem

I'm trying to set the `src` attribute of an iframe from a variable and I can't get it to work... The markup: ``` <div class="col-xs-12" ng-controller="AppCtrl"> <ul class=""> <li ng-repeat="project in projects"> <a ng-click="setProject(project.id)" href="">{{project.url}}</a> </li> </ul> <iframe ng-src="{{trustSrc(currentProject.url)}}"> Something wrong... </iframe> </div> ``` controllers/app.js: ``` function AppCtrl ($scope) { $scope.projects = { 1 : { "id" : 1, "name" : "Mela Sarkar", "url" : "http://blabla.com", "description" : "A professional portfolio site for McGill University professor Mela Sarkar." }, 2 : { "id" : 2, "name" : "Good Watching", "url" : "http://goodwatching.com", "description" : "Weekend experiment to help my mom decide what to watch." } }; $scope.setProject = function (id) { $scope.currentProject = $scope.projects[id]; console.log( $scope.currentProject ); } } ``` With this code, nothing gets inserted into the iframe's `src` attribute. It's just blank. Update 1: I injected the `$sce` dependancy into the AppCtrl and $sce.trustUrl() now works without throwing errors. However it returns `TrustedValueHolderType` which I'm not sure how to use to insert an actual URL. The same type is returned whether I use $sce.trustUrl() inside the interpolation braces in the attribute `src="{{trustUrl(currentProjectUrl))}}"` or if I do it inside the controller when setting the value of currentProjectUrl. I even tried it with both. Update 2: I figured out how to return the url from the trustedUrlHolder using .toString() but when I do that, it throws the security warning when I try to pass it into the src attribute. Update 3: It works if I use trustAsResourceUrl() in the controller and pass that to a variable used inside the ng-src attribute: ``` $scope.setProject = function (id) { $scope.currentProject = $scope.projects[id]; $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url); console.log( $scope.currentProject ); console.log( $scope.currentProjectUrl ); } ``` My problem seems to be solved by this, although I'm not quite sure why.

Original source