javascript - 将 AngularJs Widget 集成到 Adob​​e Captivate 中

Question

我在将 AngularJs 集成到 Adob​​e Captivate 8 时遇到了问题，我开始认为 AngularJs 与 captivate 不兼容，但我还没有准备好接受这一点。我的所有设计都正确加载，并且在 captivate 中正确设置，但我不确定这是否是加载我的文件的顺序，或者 Angular 是否不兼容。控制台给了我这个 Angular 错误 Go to Error.

我正在结合使用 Materialise 和 AngularJs，并尝试将其集成到 adobe captivate 小部件中。如果我将其作为 HTML5 动画插入，它会起作用，但如果我进一步将其制作为交互式小部件，则会出现该错误。

我创建的原始codepen是here 。据我所知，我已经正确地集成了它。JS代码:

var varValue;
var test1 = {
    onLoad: function () {
        //alert("Widget Loaded!");
        if (!this.captivate) {
            alert("captivate not found");
            return;
        }
        //alert("captivate found!");
        // get captivate movie props reference
        this.movieProps = this.captivate.CPMovieHandle.getMovieProps();

        if (!this.movieProps) {
            return;
        }
        //alert(this.movieProps.contentWidth + " " + this.movieProps.contentHeight);
        // get any custom widget params xml - returns an xml string
        // **** These are the values in the swf setup screen! *****
        this.xmlStr = this.captivate.CPMovieHandle.widgetParams();
        this.xmlStr = "<?xml version='1.0' encoding='UTF-8'?>" + this.xmlStr;

        // get captivate variable handle
        this.varHandle = this.movieProps.variablesHandle;
        var varValue = this.movieProps.variablesHandle;
        if (!this.varHandle) {
            alert("No varHandle Found!");
            return;
        }
        else {
            //alert("varHandle Found!");
            //alert(this.varHandle.myUserVar);
            //alert(varValue["myUserVar"]);
            //this.varHandle.myUserVar = "Hello";
            //alert(this.varHandle.myUserVar);

        }

        // get container handle
        var containerHandle = this.captivate.CPMovieHandle.getContainerProps();
        if (!containerHandle) {
            alert("containe Handle not found!");
        }

        // get captivate event handle
        this.eventDisp = this.movieProps.eventDispatcher;
        //get the Interactive Widget Handle
        var lInteractiveWidgetHandle = this.captivate.CPMovieHandle.getInteractiveWidgetHandle();
        if (!lInteractiveWidgetHandle) {
            //lInteractiveWidgetHandle.setSuccess(true);
            alert("Interactive Movie handle not found!");
        }

        // example of listening to Captivate event
        this.eventDisp.addEventListener(this.eventDisp.SLIDE_ENTER_EVENT, function (e) {
            // do something on slide enter
            //This call doesn't work.  I don't think the slide exists or is in the scope.
            //alert("The slide has been entered!");
        }, false);
        //alert("insert all other widget code here");

        //alert("window = " + window.innerWidth + ", " + window.innerHeight);
        //alert("doc Element =" + document.documentElement.clientWidth + ", " + document.documentElement.clientHeight);
        //alert("Before Canvas Draw = " + document.body.clientWidth + ", " + document.body.clientHeight);

        //*****unload your widget here******
        $(document).ready(function () {
            $('ul.tabs').tabs();
        });
        $('.carousel.carousel-slider').carousel({
            full_width: true,
            indicators: false,
        });

        var myFunction1 = function () {
            $('.carousel').carousel('set', 0);
        }
        var myFunction = function () {
            $('.carousel').carousel('set', 1);
        }
        var myFunction3 = function () {
            $('.carousel').carousel('set', 2);
        }
        var myFunction4 = function () {
            $('.carousel').carousel('set', 3);
        }
        //Angular Materialize
        var app = angular.module('materializeApp', ['ui.materialize'])
            .controller('BodyController', ["$scope", function ($scope) {
                $scope.cssLesson1 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'Pellentesque viverra fringilla neque. Pellentesque leo lacus, aliquet et lorem sed, tincidunt varius justo. Curabitur a gravida urna, in interdum neque. Maecenas ornare ullamcorper eros sed gravida. Aenean et ante id libero varius varius. Donec venenatis consectetur nunc, eu placerat libero consequat vitae. Ut quis libero vel nunc scelerisque rutrum in quis ligula. Curabitur a dolor ac mauris vestibulum interdum iaculis ac magna. Morbi aliquam turpis nec sem posuere mattis. Pellentesque mattis nec ex vitae viverra. Quisque a rhoncus ligula. Integer mollis faucibus ligula a rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a commodo lacus, at pretium augue. Nulla odio sapien, pellentesque in auctor nec, rutrum eget sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin et metus nibh. Proin accumsan dolor sollicitudin neque tempor pharetra eu nec lacus. Suspendisse feugiat facilisis suscipit. Donec eu tristique velit, ac condimentum tellus.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This lesson will take approximately 1 hour'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'No assignments due.',
                }];

                $scope.cssLesson2 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'Pellentesque viverra fringilla neque. Pellentesque leo lacus, aliquet et lorem sed, tincidunt varius justo. Curabitur a gravida urna, in interdum neque. Maecenas ornare ullamcorper eros sed gravida. Aenean et ante id libero varius varius. Donec venenatis consectetur nunc, eu placerat libero consequat vitae. Ut quis libero vel nunc scelerisque rutrum in quis ligula. Curabitur a dolor ac mauris vestibulum interdum iaculis ac magna. Morbi aliquam turpis nec sem posuere mattis. Pellentesque mattis nec ex vitae viverra. Quisque a rhoncus ligula. Integer mollis faucibus ligula a rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a commodo lacus, at pretium augue. Nulla odio sapien, pellentesque in auctor nec, rutrum eget sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin et metus nibh. Proin accumsan dolor sollicitudin neque tempor pharetra eu nec lacus. Suspendisse feugiat facilisis suscipit. Donec eu tristique velit, ac condimentum tellus.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This lesson will take approximately 2 hour'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Create an inline style with a working class and id on the page.',
                }];
                $scope.cssLesson3 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'Pellentesque viverra fringilla neque. Pellentesque leo lacus, aliquet et lorem sed, tincidunt varius justo. Curabitur a gravida urna, in interdum neque. Maecenas ornare ullamcorper eros sed gravida. Aenean et ante id libero varius varius. Donec venenatis consectetur nunc, eu placerat libero consequat vitae. Ut quis libero vel nunc scelerisque rutrum in quis ligula. Curabitur a dolor ac mauris vestibulum interdum iaculis ac magna. Morbi aliquam turpis nec sem posuere mattis. Pellentesque mattis nec ex vitae viverra. Quisque a rhoncus ligula. Integer mollis faucibus ligula a rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a commodo lacus, at pretium augue. Nulla odio sapien, pellentesque in auctor nec, rutrum eget sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin et metus nibh. Proin accumsan dolor sollicitudin neque tempor pharetra eu nec lacus. Suspendisse feugiat facilisis suscipit. Donec eu tristique velit, ac condimentum tellus.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 3 hours.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Style your page and make it personal. You can style the page any way you would like.'
                }];
                $scope.cssLesson4 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'Pellentesque viverra fringilla neque. Pellentesque leo lacus, aliquet et lorem sed, tincidunt varius justo. Curabitur a gravida urna, in interdum neque. Maecenas ornare ullamcorper eros sed gravida. Aenean et ante id libero varius varius. Donec venenatis consectetur nunc, eu placerat libero consequat vitae. Ut quis libero vel nunc scelerisque rutrum in quis ligula. Curabitur a dolor ac mauris vestibulum interdum iaculis ac magna. Morbi aliquam turpis nec sem posuere mattis. Pellentesque mattis nec ex vitae viverra. Quisque a rhoncus ligula. Integer mollis faucibus ligula a rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a commodo lacus, at pretium augue. Nulla odio sapien, pellentesque in auctor nec, rutrum eget sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin et metus nibh. Proin accumsan dolor sollicitudin neque tempor pharetra eu nec lacus. Suspendisse feugiat facilisis suscipit. Donec eu tristique velit, ac condimentum tellus.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 2 hours.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'For this assignment you will use the <style> tag to implement your styles to the HTML elements. Part two of the assignment will to be to create an external CSS stylesheet and import it to the page.'
                }];
                $scope.htmlLesson1 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'In this Lesson you will learn the basics of HTML5.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 3 hours.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Build a proper HTML5 template.'
                }];
                $scope.htmlLesson2 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'In this lesson you will be exploring HTML5 tags and creating content for your new web page.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 1 hours.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Explore different HTML tags such as <h1> and <p> which you will implement into a working web page to display content.'
                }];
                $scope.htmlLesson3 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'In this lesson you will learn how to add structure to your HTML5 page and organize your content.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 1 hours and 15 minutes.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Restructure your current page with the proper structuring techniques learned in this lesson.'
                }];
                $scope.htmlLesson4 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'In this lesson you will learn about the <td>, <th>, and <tr> tags for constructing tables.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 3 hours and 15 minutes.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Add a table in your web page with data of your choice.'
                }];
                $scope.javascriptLesson1 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'In this lecture we will go over the basics of JavaScript and this lesson will be an introduction to using JavaScript'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 2 hours and 10 minutes.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Declare a few variables and log your new variable to the console.'
                }];
                $scope.javascriptLesson2 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'JavaScript supports a compact set of statements, specifically control flow statements, that you can use to incorporate a great deal of interactivity in your application.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 3 hours and 20 minutes.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Create a conditionional if statement and follow it with an else if statement. Once you are finished with your conditional statements you can end it with an else statement.'
                }];
                $scope.javascriptLesson3 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'Values can be passed to a function, and the function will return a value. In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 4 hours.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'create a function named cats and when that function is called create a while loop to display "it is raining cats" once.'
                }];
                $scope.javascriptLesson4 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'You will be learning about arrays in this lesson which will take you through how to call a specific value from that array and how to define an array within an array.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 3 hours.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Create an array with values of your choice and then create a multi dimensional array on a seperate line.'
                }];
                $scope.phpLesson1 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'This is an introduction to PHP. In this course you will be introduced to creating dynamic pages and using MYSQL database to store data from your page.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 30 minutes.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Create a new PHP document and use echo to display text on your page.'
                }];
                $scope.phpLesson2 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'In this lesson you will be going over If/Else statements in PHP and how to implement them properly.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 2 hours.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Create a conditional statement using PHP and echo two different strings within each and make the statement either true or false.'
                }];
                $scope.phpLesson3 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'In this lesson you will discover how to use arrays in PHP.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 3 hours.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Create an array with at least four values of your choice.'
                }];
                $scope.phpLesson4 = [{
                    icon: 'large material-icons',
                    iconDisplay: 'message',
                    title: 'Lecture',
                    content: 'In this lesson you will play around with for loops and foreach loops.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'schedule',
                    title: 'Completion Time',
                    content: 'This assignment will take approximately 4 hours.'
                }, {
                    icon: 'large material-icons',
                    iconDisplay: 'assignment',
                    title: 'Assignments',
                    content: 'Create a for loop that counts backwards from 100 and stops at 0.'
                }];
            }]);
        //******end widget******
    }
};
// Ensure that there is a constructor function
// available for the JavaScript class identified by
// the 'jsClass' attribute. The constructor has no arguments.
var test = function () {
    return test1;
};

在 test_oam.xml 文件中，我有 CDATA，它将 HTML 元素分散到文档中，我认为这可能会延迟导致错误的内容的加载，但我不确定是否有其他方法将 HTML 导入到文档中除了在 .xml 文件中使用 CDATA 之外的小部件。

Answer 1

我通过玩了一下发现 JavaScript 文件中的 AngularJs 代码没有被发现，我认为这可能是一个加载顺序问题，我相信这是因为我在 header 中内联了 AngularJs 代码使用 script 标签的页面似乎解决了问题。只有当您从外部js文件调用 Angular 代码时，才会在captivate中工作时出现问题。