AngularJs встраивают документ MS Word, используя переменную $scope в качестве URL

Question

Внедрение случайного документа Word в формате MS Word, которое я нашел в Интернете, работает, если я жестко закодирую 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>

Однако я хочу получить URL-адрес по AJAX, поэтому я изменил HTML-код на

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

но даже жестко $scope переменная в моем JS:

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

дает

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

Это кажется довольно простым - что я делаю неправильно?

Answer 1

Вы должны использовать $ 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);

и HTML:

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

Демо Фиддл

---

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

или же:

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

не работает из-за политики, поэтому вам нужно пройти через $sce полный URL

Answer 2

Здесь вам нужно импортировать предопределенные сервисы angularjs:

$ sanitize, $ sce вставляет их в ваш контроллер, и вы можете заменить или изменить URL-адрес, поскольку, если вы используете его напрямую, он не будет отображать этот URL-адрес, потому что это одна из политик безопасности для отображения ненужной вещи на веб-странице,

В HTML:

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

В контроллере JS:

var app = angular.module('app', ['ngSanitize']);

app.controller('Ctrl', function($scope, $sanitize, $sce) {
  var Url = 
    'http://yoururl.com.doc&embedded=true';

  $scope.urlHere= $sce.trustAsResourceUrl(Url);
});