angularjs biểu trong html <object> thẻ

Question

Tôi có một phạm vi như $scope.doc_details trong điều khiển angularjs của tôi, và tôi muốn sử dụng nó để hiển thị một file pdf bằng cách sử dụng một thẻ, như thế này:

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

nhưng nó doesn' t có được nạp trong trình duyệt, trong giao diện điều khiển chrome của tôi, tất cả tôi thấy là:

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

và khi tôi chỉ hiển thị nó bằng cách sử <span>{{doc_details.file_url}}</span> nó hiển thị các giá trị.

Answer 1

Vấn đề ở đây là trình duyệt được nhìn thấy

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

trong DOM trước góc biên dịch nó, và rõ ràng là {{doc_details.file_url}} không phải là một URL hợp lệ.

Chỉ thị có thể là bạn của bạn ở đây.

Giả sử chúng ta muốn viết:

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

Chúng ta có thể tạo ra một chỉ thị rất đơn giản:

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

này sẽ trì hoãn việc tạo ra các yếu tố object cho đến khi chúng tôi thực sự có URL có sẵn cho chúng tôi từ phạm vi (giả sử nó đã có sẵn - nếu không bạn muốn $watch thuộc tính src trên phạm vi cho đến khi nó có sẵn).

Here this is in a fiddle.

Answer 2

Tính đến AngularJS 1.1.4, bạn có thể sử dụng tiền tố ng-attr- cho thuộc tính data:

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

Xem ngAttr để liên kết với các thuộc tính tùy ý phần trên AngularJS: Interpolation and data-binding.

Answer 3

Trước tiên, bạn cần phải kiểm tra xem phản hồi có phải là bộ lọc mảng hay không, nếu có, chuyển đổi thành cơ số 64. Ngoài ra, bạn có thể sử dụng thuộc tính thiết lập để gán.