Выражение angularjs в теге html <object>

У меня есть область как $scope.doc_details в моем контроллере angularjs, и я хочу использовать ее для отображения pdf файла с помощью тега, например:

<object data="{{doc_details.file_url}}" type="application/pdf"></object>

но он не загружается в браузере, на моей консоли Chrome, все, что я вижу:

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost/%7B%7Bdoc_details.file_url%7D%7D

и когда я просто показываю его с помощью <span>{{doc_details.file_url}}</span>, он показывает значение.

Ответ 1

Проблема заключается в том, что браузер видит

<object data="{{doc_details.file_url}}" type="application/pdf"></object>

в DOM перед Angular компилирует его, и, очевидно, {{doc_details.file_url}} не является допустимым URL.

Директивы могут быть вашим другом здесь.

Скажем, мы хотим написать:

<pdf src='doc_details.file_url'></pdf>

Мы можем создать очень простую директиву:

app.directive('pdf', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            var url = scope.$eval(attrs.src);
            element.replaceWith('<object type="application/pdf" data="' + url + '"></object>');
        }
    };
});

Это отложит создание элемента object до тех пор, пока мы не получим доступный нам URL из области видимости (предположим, что он уже существует - в противном случае вы хотели бы $watch атрибут src в области до тех пор, пока он стал доступен).

Вот это в скрипке.

Ответ 2

По AngularJS 1.1.4 вы можете использовать префикс ng-attr- для атрибута data:

<object ng-attr-data="{{doc_details.file_url}}" type="application/pdf"></object>

См. раздел ngAttr для привязки к произвольным атрибутам на AngularJS: Интерполяция и привязка данных.

Ответ 3

Браузер пытается обработать объект до того, как AngularJS заменит угловое выражение чем-то, с чем браузер может работать, что приведет к ошибке.

Добавление ng-cloak устраняет проблему.

Ответ 4

Спасибо, satchmorun, но если кто-то захочет изменить ссылку без перезагрузки страницы или мода, вы можете использовать:

<pdf2 src="pdfUrl" height="heightForPDF"></pdf2>

И эта директива:

app.directive('pdf2', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            src: "=",
            height: "="
        },
        link: function (scope, element, attr) {
            function update(url) {
                    element.html('<object data="' + url + '" type="application/pdf" width="100%" style="height: ' + scope.height + 'px">' +
                        'Для просмотра pdf:<br /> Для Internet Explorer установите <a target="_blank" href="http://get.adobe.com/reader/">Acrobat Reader</a><br />' +
                        'Для Chrome: <a target="_blank" href="https://support.google.com/chrome/answer/6213030?hl=ru">Проверьте настройки</a>' +
                        '</object>');
                    $compile(element.contents())(scope);
            }
            scope.$watch('src', update);
        }
    };
}]);

Спасибо Джерри за этот ответ и пример перекомпиляции динамически загруженной директивы.

постскриптум "pdfUrl" и "heightForPDF" являются переменными в области видимости

Ответ 5

Сначала вам нужно проверить, является ли ответ массивным буфером, если он есть, преобразовать его в базу 64. Также вы можете использовать setattribute для назначения.