Impress.js and AngularJS Controller

Question

I am running an AngularJS application/controller. My goal is to initialize and use the impress.js library on a page that is being dynamically loaded into my main home page. However, when I try to initialize the library, the page does not load. Attached is a snippet of the controller and html file.

NOTE: When I print the impress() object to the console, it is not null, and has the required functions. It is my suspicion that the impress() object is not hooking up to the page correctly.

Controller:

'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 File:

<!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>

`impress()` is not an object but a function call. What you meant is probably `impress.init()`? The details of the error probably appeared in your browser's JS console, use this information as your first line of support before asking on SO. — kryger, Jun 18 '15 at 13:38
Sorry for the confusion, `impress()` is a function, and what I meant is that it returns an object, which has an `init()` method. Calling `impress.init()` gives an error "`impress.init` is not a function." This is outlined in the source code, saying "You also need to call a `impress().init()` function to initialize impress.js presentation." from https://github.com/bartaz/impress.js/blob/master/index.html — vontell, Jun 18 '15 at 13:51
So... What IS the error? What does the debugger console show? — kryger, Jun 18 '15 at 13:53
Currently the debugger console does not give any errors. My console.log statements all print and the page loads, but the library does not bind to the id = "impress" div like it is suppose to, as explained in the impress.js source code. So everything runs without errors, but nothing actually happens. — vontell, Jun 18 '15 at 14:01

score 1 · Accepted Answer · answered Jul 05 '15 at 23:49

1

This problem was fixed by using the jmpress.js library instead, found here.

answered Jul 05 '15 at 23:49

vontell

342
3
17

Impress.js and AngularJS Controller

1 Answers1