Impress.js和AngularJS控制器

Question

我正在运行AngularJS应用程序/控制器。 我的目标是在动态加载到我的主页中的页面上初始化和使用impress.js库。 但是，当我尝试初始化库时，页面无法加载。 随附的是控制器和html文件的代码段。

注意：当我将impress()对象打印到控制台时，它不是null，并且具有必需的功能。 我怀疑impress()对象未正确连接到页面。

控制器：

'use strict';

// Create the angular module
var cmodule = angular.module('coverage', ['ngRoute'])

// Create the coverage controller
cmodule.controller('coverageController', function($scope) {

    console.log("Entering controller");
    function require(script) {
        $.ajax({
            url: script,
            dataType: "script",
            async: true,           // <-- This is the key
            success: function () {
                console.log(impress());
                impress().init();
            },
            error: function () {
                throw new Error("Could not load script " + script);
            }
        });
    }

    console.log("About to require");
    angular.element(document).ready(function () {
        require("/content/libraries/impress.js");
            });


    });

HTML档案：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>My Coverage</title>
    <link rel="stylesheet" href="/content/styles/team1.css">
</head>
<body class="impress-not-supported">
    <!--
    For example this fallback message is only visible when there is `impress-not-supported` class on body.
    -->
    <div class="fallback-message">
        <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
        <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
    </div>

    <!-- Now the fun begins -->

    <div id="impress">

        <!-- The background image -->
        <div class="present" data-x="0" data-y="0">
            <!-- Place Image here -->
        </div>

        <!-- Example content -->
        <div id="url-ident" class="step" data-x="0" data-y="0">
            <q>Ready to view your coverage?</q>
        </div>

        <!-- Example content -->
        <div id="step1" class="step" data-x="500" data-y="0">
            <p>Questions start here!</p>
        </div>

    </div> <!-- /div impress -->

    <script type="text/javascript" src="/content/libraries/impress.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <!--script type="text/javascript">impress().init();</script-->

</body>
</html>

Answer 1

该问题是通过使用jmpress.js库（位于此处）解决的。

Impress.js和AngularJS控制器

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-07-05 23:49:13

Impress.js和AngularJS控制器

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-07-05 23:49:13

解决方案1
1 已采纳 2015-07-05 23:49:13