html中的angularjs表達式<object>標簽

Question

我的 angularjs 控制器中有一個類似於$scope.doc_details的范圍，我想用它來通過使用標簽來顯示 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>顯示它時，它會顯示值。

Answer 1

從AngularJS 1.1.4 開始，您可以對data屬性使用ng-attr-前綴：

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

請參閱ngAttr以綁定到AngularJS上的任意屬性部分：插值和數據綁定。

Answer 2

這里的問題是瀏覽器看到的

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

在 Angular 編譯它之前的 DOM 中，顯然{{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屬性直到它變得可用）。

這是一個小提琴。

Answer 3

謝謝satchmorun ，但如果 smb 想要更改鏈接而不重新加載頁面或模式，您可以使用：

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

感謝Jerry從這個答案和重新編譯動態加載指令的示例。

ps "pdfUrl" 和 "heightForPDF" 在范圍內是可變的

Answer 4

瀏覽器嘗試在 AngularJS 用瀏覽器可以使用的東西替換 angulary 表達式之前處理這個東西，從而導致錯誤。

添加ng-cloak解決了這個問題。

Answer 5

首先需要檢查響應是否為arraybuffer，如果是，則將其轉換為base 64.此外，您可以使用setattribute進行分配。