Angularjs 指令示例

本文介绍了一个用于预览PDF文件的自定义AngularJS指令。该指令能够根据提供的附件信息判断文件类型,并只对PDF文件进行预览。同时提供了一个示例性的调用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

pdf文件预览指令
1.指令定义

app.directive('embedPdf', function() {
    return {
        restrict: 'E',
        scope: {
            attachment: '=attachment'
        },
        template:'',
        link: function(scope, element, attrs) {
            function showAttachment(attachment) {
                if (!attachment) {
                    element.html('<div align="center">文件不存在。</div>');
                }else if(!(attachment.mimeType == 'application/pdf')){
                    element.html('<div align="center"><h3>文件不是PDF格式文件,无法预览。</h3></div>');
                }else if(attachment.mimeType == 'application/pdf'){
                    element.html('<embed width="850px" height="495px" src="' + app.contextPath + '/attachments/file/' + attachment.name + '" type="application/pdf"></embed>');
                }
            }
            scope.$watch('attachment', function(nv, ov) {
                showAttachment(nv);
            });
            showAttachment(scope.attachment);
        }
    };
});

2.js代码

 $scope.view = function(id){
         jddoclstRes.findAttach({'attId':id},{},function(r){
             $scope.attachment = r;
         });             
         $scope.viewDlg.visible = true;
     }

3.指令使用

<embed-pdf attachment="attachment"/>

4.命名规则

<embed-pdf/>~~对应'embedPdf'
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值