Question

我正在使用angularjs和boostrap。

我需要在该弹出窗口中显示图像和pdf文件的预览。我只输入带路径的文件名。但我无法根据图像宽度显示预览。例如，图像有500px意味着弹出窗口应显示500px宽度。如果图像大于900px则意味着弹出窗口大小固定宽度为900px。

最好加载图片和pdf文件？

iframe或......？

我在这里附上我的代码。我感觉图像文件是热编码的，文件名是自动生成的。

<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container" ng-app="app" ng-controller="Controller">

    <h3>Angular Modal Service</h3>
    <a class="btn btn-default" href ng-click="show()">Show a Modal</a>
    <p>
        {{message}}
    </p>

    <!-- The actual modal template, just a bit o bootstrap -->
    <script type="text/ng-template" id="modal.html">
        <div class="modal fade">
        <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Image</h4>
        </div>
        <div class="modal-body">
        <p>It's your call...</p>
        </div>
        <div class="modal-footer">
        <img src="http://slideshare-wordpress-blog-pictures.s3.amazonaws.com/ethos3-Theme-cover.jpg">
        </div>
        </div>
        </div>
        </div>
    </script>

</div>

Js代码：

var app = angular.module('app', ['angularModalService']);

app.controller('Controller', function($scope, ModalService) {

    $scope.show = function() {
        ModalService.showModal({
            templateUrl : 'modal.html',
            controller : "ModalController"
        }).then(function(modal) {
            modal.element.modal();
            modal.close.then(function(result) {
                $scope.message = "You said " + result;
            });
        });
    };

});

app.controller('ModalController', function($scope, close) {

    $scope.close = function(result) {
        close(result, 500);
        // close, but give 500ms for bootstrap to animate
    };

});

Angularjs + Bootstrap + Modal框宽度根据内容调整大小

0 个答案: