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?

Ronnie · Accepted Answer · 2016-11-29 23:07:10Z

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);
});

answered Nov 29, 2016 at 23:07

Ronnie

11.2k22 gold badges85 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using angularjs to build iframe url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related