我在将AngularJs集成到Adobe Captivate 8时遇到了问题，我开始认为AngularJs与captivate不兼容，但我还没准备接受。我的所有设计都正确加载并且设置正确但是我不确定它是否是加载我的文件的顺序或者Angular是否兼容。控制台给了我这个角度的错误 Go to Error.
我正在使用materialialize和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之外的小部件。
答案 0 :(得分：0)
我发现通过玩一下，找不到JavaScript文件中的AngularJs代码，我认为这可能是一个加载顺序问题，我认为这是因为我内联了标题中的角度代码使用脚本标记的页面似乎解决了问题。只有当您从外部js文件调用角度代码时才会在使用Captivate时遇到问题。