在 AngularJS 中重新加载 <object> html 标签

Question

我正在做一个网络项目，它要求用户上传 pdf 文件，我发现当用户删除他们之前上传的文件并尝试在预览模式下上传新文件时能看到的还是删除的文件。预览页面呈现在对象标记中，因此我正在尝试找出一种重新加载它的方法。

这是我在控制器中的 angular 代码：

    var getFile= function () {
        service.getFile()  // c# endpoint
            .then(function (response) {
                var file = new Blob([response.data], { type: 'application/pdf' });
                $scope.fileURL = window.URL.createObjectURL(file);
            })
            .catch(function (fallback) {
                $scope.fileURL = null;
            });
    }

据我了解，正常的 Angular 行为是每当 {{fileURL}} 更改时，观察者应相应地更新 html。但是，在我下面的 HTML 代码中，

<h3>{{fileURL}}</h3>
<div id="pdfFile">
      <object type="application/pdf" data="{{fileURL}}" width="100%" height="1000"></object>
</div>

中的 {{fileURL}} 得到正确更新，而作为数据属性的 {{fileURL}} 保持不变。我可以确认从后端一路传输了正确的文件数据。

我尝试使用jQuery获取对象标签并直接设置其数据属性，我在该方法中发现{{fileURL}}在控制器中的值与 HTML 代码中使用的不同，但它们指向同一个文件。我认为这是由于这些网址是临时生成的，所以范围有限。

我也试过这个：

     var $pdf = $("#pdfFile");
     console.log("Step 1");
     $pdf.empty();
     console.log("Step 2");
     var newObj = '<object type="application/pdf" data="{{fileURL}}" width="100%" height="1000" id="pdfFile"></object>'
     console.log("Step 3");
     $pdf.append(newObj);
     console.log("Step 4");

但这与上一种方法有同样的问题，它指向一个无效的 url 并且只是 returns 我到我的应用程序的主页。

$route.reload()方法不可取，$scope.apply()方法也不行。我很困惑为什么对象标签没有相应地改变以及我应该如何解决这个问题。

请给我一些关于如何解决这个问题的建议。提前致谢。

Answer 1

如果我误解了问题，我会删除它，但是您是否尝试过 ng-if（不是 ng-show）和某种使用超时的开关的组合。 ng-if 将从 dom 中完全删除对象，而 ng-show 只会隐藏它。

<div id="pdfFile">
      <object type="application/pdf"  ng-if="fileURL" data="{{fileURL}}" width="100%" height="1000"></object>
</div>

...然后在控制器中

确保您正在注入 $timeout 和 $window 对象

angular.module('controllers.myController', [])
    .controller('myController', [
    "$scope",
    "$rootScope",
    "$stateParams",
    "$timeout",
    "$window",
    function($scope, $rootScope, $stateParams, $timeout, $window) {
       ....

然后在你的代码中...

.then(function (response) {
                var file = new Blob([response.data], { type: 'application/pdf' });
                $scope.fileURL = null;
                $timeout(() => { $scope.fileURL = $window.URL.createObjectURL(file); }, 500);
            })

在 AngularJS 中重新加载 <object> html 标签

Reloading an <object> html tag in AugularJS

.net

html

url

angularjs