using angularjs to build iframe url

Question

i am getting an iframe image from a url that i want to be dynamic. So...for example i want to pass in a different url for each application # that i am previewing.

i've tried using ng-src to generate my url but it seems to be failing.

html:

<iframe ng-src="http://localhost:3000/v4/{{applicationNumberText}}/{{documentIdentifier}}"></iframe>

controller:

$scope.applicationNumberText = '09123456';
$scope.documentIdentifier = 'E1DUJW9JPP1GUI3';

getting this error: angular.js:11706 Error: [$interpolate:noconcat] Error while interpolating

any ideas?

Answer 1

Well, for one you cannot concatenate a string like that. Second, you will need to use $sce and tell your app it is a trusted url resource. see fiddle: https://jsfiddle.net/ojzdxpt1/4/

app.controller('TestController', function($scope,$sce) {
  $scope.applicationNumberText = '09123456';
  $scope.documentIdentifier = 'E1DUJW9JPP1GUI3';
  $scope.iFrameUrl = $sce.trustAsResourceUrl("http://localhost:3000/v4/" + $scope.applicationNumberText + "/" + $scope.documentIdentifier);
});