Mawg Mawg - 3 years ago 141
AngularJS Question

AngularJs embedding an MS Word doc using a $scope variable as the URL

Embedding a random MS Word word doc, which I found on the internet, works if I hard code the URL:

<iframe src="http://docs.google.com/gview?url=https://d9db56472fd41226d193-1e5e0d4b7948acaf6080b0dce0b35ed5.ssl.cf1.rackcdn.com/spectools/docs/wd-spectools-word-sample-04.doc&embedded=true"></iframe>


However, I want to get the URL by AJAX, so I changed the HTML to

<iframe src="{{cvUrl}}&embedded=true"></iframe>


but even hardcoding that
$scope
variable in my JS:

$scope.cvUrl =
'http://docs.google.com/gview?url=https://d9db56472fd41226d193-1e5e0d4b7948acaf6080b0dce0b35ed5.ssl.cf1.rackcdn.com/spectools/docs/wd-spectools-word-sample-04.doc';


gives

Object not found!

The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

If you think this is a server error, please contact the webmaster.

Error 404

localhost
Apache/2.4.23 (Win32) OpenSSL/1.0.2h PHP/5.6.24


This seems quite basic - what am I doing wrongly?

Answer Source

You should use $sce.trustAsResourceUrl

var cvUrl = 
'http://docs.google.com/gview?url=https://d9db56472fd41226d193-1e5e0d4b7948acaf6080b0dce0b35ed5.ssl.cf1.rackcdn.com/spectools/docs/wd-spectools-word-sample-04.doc&embedded=true';

$scope.cvUrlTrusted = $sce.trustAsResourceUrl(cvUrl);

and HTML:

<iframe ng-src="{{cvUrlTrusted}}"></iframe>

Demo Fiddle


<iframe src="{{cvUrl}}&embedded=true"></iframe> <!-- wrong syntax -->

or:

<iframe ng-src="{{cvUrlTrusted + '&embedded=true'}}"></iframe>

doesn't work too because of policy, so you need pass through $sce full URL

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download