19

I have a scope like $scope.doc_details in my angularjs controller, and I want to use it to display a pdf file by using a tag, like this:

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

but it doesn't get loaded in the browser, in my chrome console, all I see is:

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

and when I just display it using <span>{{doc_details.file_url}}</span> it show the value.

shouldAutorotateToInterfaceOrientation is deprecated in iOS 6, you should override supportedInterfaceOrientations method of UIViewController

There is quote from doc:

In iOS 6, your app supports the interface orientations defined in your app’s Info.plist file. A view controller can override the supportedInterfaceOrientations method to limit the list of supported orientations. Generally, the system calls this method only on the root view controller of the window or a view controller presented to fill the entire screen; child view controllers use the portion of the window provided for them by their parent view controller and no longer participate in directly in decisions about what rotations are supported. The intersection of the app’s orientation mask and the view controller’s orientation mask is used to determine which orientations a view controller can be rotated into.

You can override the preferredInterfaceOrientationForPresentation for a view controller that is intended to be presented full screen in a specific orientation.

4

4 回答 4

34

从AngularJS 1.1.4开始，您可以使用属性的ng-attr-前缀：data

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

请参阅AngularJS 上ngAttr的绑定到任意属性部分：插值和数据绑定。

于 2014-02-13T11:10:54.360 回答
25

这里的问题是浏览器正在查看

<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属性，直到它变得可用）。

这是一个小提琴。

于 2013-02-15T21:51:48.890 回答
1

谢谢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" 在范围内是可变的

于 2019-09-10T09:37:05.207 回答
0

浏览器尝试在 AngularJS 用浏览器可以使用的东西替换 angulary 表达式之前处理这个东西，从而导致错误。

添加ng-cloak解决问题。

于 2018-03-21T09:26:14.217 回答