Question

我需要通过angularjs route provider加载/启动revealjs幻灯片，以下是代码。

然而，揭示幻灯片的大小异常非常小，任何线索为什么？

1）index.html

<!doctype html>
<html ng-app="ngApp">  

<head>
  <meta charset="utf-8">
  <script type="text/javascript"  src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.js"></script> 

  <link rel="stylesheet" href="css/reveal.min.css">
  <link rel="stylesheet" href="css/theme/simple.css" id="theme">  
</head>

<body>
  <a href="revealjs"  style="display:none;" id="revealjsId"></a>   
  <button type="button" onclick="startRevealjs()">start revealjs slides</button>

</div>
<script>
        function startRevealjs()
        {       
                var res=document.getElementById("revealjsId");
                res.click();
        }

        angular.module('ngApp', ['ngRoute', 'ngAnimate'])
        .config(['$routeProvider', '$locationProvider',
        function($routeProvider, $locationProvider) {
        $routeProvider
           .when('/revealjs', {        
                templateUrl: 'revealjs.html'
           });
        //for html5 compatibility 
        $locationProvider.html5Mode(true);
        }])     
</script>

<form action="" method="post">
   <div ng-view> </div>   
</form>

</body>
</html>

2）revealjs.html

<body>
        <div class="reveal">
            <div class="slides">
                <section>
                    <h1>slide 1</h1>
                </section>

                <section>
                    <h1>slide 2</h1>
                </section>

                <section>
                    <h1>slide 3</h1>
                </section>

            </div>
        </div>

        <script src="lib/js/head.min.js"></script>
        <script src="js/reveal.min.js"></script>        
        <script>
            Reveal.initialize({});
        </script>
</body>

注意：我最近开始研究上述技术。

如何将revealjs整合到angularjs中

0 个答案: