Question

我在angular.JS ver 1.42和yeoman scaffold上使用reveal.js进行幻灯片放映，我把代码完全按照说明书的方式进行，但是我得到一个小显示，我尝试调整幻灯片的内容，修改显示css，强制图像调整大小，但没有任何效果，幻灯片内部已经很大看下面的图片，并感谢您的帮助。

所以我试图找到可以解决此问题的方法是我的代码

<div class="container-fluid" >
<div class="row">
    <div class="col-md-12">
        <div class="reveal"  fullscreen>
            <!-- Wrap all slides in a single "slides" class -->
            <div class="slides">
                <!-- ALL SLIDES GO HERE -->
                <!-- Each section element contains an individual slide -->
                <section ng-repeat="slide in  slideShow.slides" >
                    <img  ng-src="{{slide}}" >
                </section>
            </div>
        </div>
    </div>
</div>

这是控制器非常简单

'use strict';


          var Reveal;
    angular.module('nwApp')
        .controller('slideShowCtrl', ['$timeout', function($timeout) {

            var self = this;
            self.slides = [];
            for (var i = 1; i < 10; i++) {
                var id = {};
                id =     'https://webservice.com/nw/Slides/GCBT_ALBUMIN/00' + i + '.jpg';
                self.slides.push(id);// Displaying Images url on ng-repeat 
            }



    Reveal.addEventListener('slidechanged', function(event) {
        console.log(event);
    });

    // slide show configuration settings 
    $timeout(function() {

        Reveal.initialize({


            width: 960,
            height: 700,

            // Factor of the display size that should remain empty around the content
            margin: 0.1,

            // Bounds for smallest/largest possible scale to apply to content
            //minScale: 0.2,
            maxScale: 1.5,

            // Display controls in the bottom right corner
            controls: true,

            // Display a presentation progress bar
            progress: true,

            // Display the page number of the current slide
            slideNumber: true,

            // Push each slide change to the browser history
            history: false,

            // Enable keyboard shortcuts for navigation
            keyboard: true,

            // Enable the slide overview mode
            overview: true,

            // Vertical centering of slides
            center: true,

            // Enables touch navigation on devices with touch input
            touch: true,

            // Loop the presentation
            loop: false,

            // Change the presentation direction to be RTL
            rtl: false,

            // Turns fragments on and off globally
            fragments: true,

            // Flags if the presentation is running in an embedded mode,
            // i.e. contained within a limited portion of the screen
            embedded: false,

            // Flags if we should show a help overlay when the questionmark
            // key is pressed
            help: true,

            // Number of milliseconds between automatically proceeding to the
            // next slide, disabled when set to 0, this value can be overwritten
            // by using a data-autoslide attribute on your slides
            autoSlide: 0,

            // Stop auto-sliding after user input
            autoSlideStoppable: true,

            // Enable slide navigation via mouse wheel
            mouseWheel: true,

            // Hides the address bar on mobile devices
            hideAddressBar: true,

            // Opens links in an iframe preview overlay
            previewLinks: false,

            // Transition style
            transition: 'default', // none/fade/slide/convex/concave/zoom

            // Transition speed
            transitionSpeed: 'default', // default/fast/slow

            // Transition style for full page slide backgrounds
            backgroundTransition: 'default', // none/fade/slide/convex/concave/zoom

            // Number of slides away from the current that are visible
            viewDistance: 3,

            // Parallax background image
            parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

            // Parallax background size
            parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"

            // Amount to move parallax background (horizontal and vertical) on slide change
            // Number, e.g. 100
            parallaxBackgroundHorizontal: '',
            parallaxBackgroundVertical: ''
        });
    }, 300);
}]);

你可以看到我只使用ng重复来重复这个图像标签，其中url ng-src {{slide}}是图片网址

    `  <section ng-repeat="slide in  slideShow.slides" >
                    <img  ng-src="{{slide}}" >
                </section>`

最后这是我的索引以防万一，这是使用YEOMAN

完成的

    <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

      <link rel="stylesheet" href="bower_components/angular-material-icons/angular-material-icons.css">
      <link rel="stylesheet" href="bower_components/reveal-js/css/reveal.css">
      <link rel="stylesheet" href="bower_components/reveal-js/css/theme/moon.css" id="theme">


    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />

    <link rel="stylesheet" href="styles/main.css"> 

  </head>
  <body ng-app="nwApp" >


    <div class="header">
        <div class="container">
            <div class="col-md-12 column">
                <div class="row clearfix">
                    <div class="col-md-6 column">
                       <h1 class="text-primary">Name Candidate</h1>
                    </div>
                    <div class="col-md-6 column">
                        <img ng-src="images/logoBIdocs.png" alt="D.S.I." style='width: 125px;float:right' />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container" >
    <div ng-view="" ></div>
    </div>

      <div class="footer">
        <div class="container">
            <p>Brand Institute, Inc. </span> NW </p>
        </div>
    </div>


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
       (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
       r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
       }(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
    <!-- endbower -->
    <script src="bower_components/angular-material-icons/angular-material-icons.js"></script>
    <script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
    <script src="bower_components/angular-fullscreen-master/src/angular-fullscreen.js"></script>
    <script src="bower_components/reveal-js/js/reveal.js"></script>
    <script src="bower_components/reveal-js/lib/js/head.min.js"></script>
    <script src="bower_components/reveal-js/lib/js/html5shiv.js"></script>
    <script src="bower_components/reveal-js/lib/js/classList.js"></script>
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/services/getDataFactory.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/slideShow.js"></script>
        <script src="scripts/directives/slideShow.js"></script>
        <!-- endbuild -->
</body>
</html>

Answer 1

好的，我发现问题非常简单我只需更改minScale：3，在Reveal.initialize fucntion中

angular.js和Reveal.js我的幻灯片显示太小

1 个答案: