我正在尝试设置angular-intro
到目前为止，我已完成以下工作：
HTML：
<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="ClientDashboardController">
<div class="row" ng-intro-options="IntroOptions" ng-intro-autostart="true">
<div class="col-lg-5 col-md-12" id="step1">
</div>
</div>
</div>
在我的ClientDashboardController中，我有以下内容：
$scope.IntroOptions = {
steps:[
{
element: '#step1',
intro: 'More features, more fun.',
position: 'left'
},
{
element: '#step2',
intro: "Another step.",
position: 'bottom'
},
],
showStepNumbers: false,
exitOnOverlayClick: true,
exitOnEsc:true,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks'
};
然而，在我的浏览器中，我得到以下两个错误：
Error: [$compile:nonassign] Expression 'undefined' used with directive 'ngIntroOptions' is non-assignable!
http://errors.angularjs.org/1.3.14/$compile/nonassign?p0=undefined&p1=ngIntroOptions
at angular.js:63
at parentSet (angular.js:7661)
at parentValueWatch (angular.js:7674)
at Object.regularInterceptedExpression (angular.js:12852)
at Scope.$digest (angular.js:14235)
at angular.js:14440
at completeOutstandingRequest (angular.js:4905)
at angular.js:5285
和
TypeError: c.ngIntroMethod is not a function
at ng-intro.js:2
at angular.js:16223
at completeOutstandingRequest (angular.js:4905)
at angular.js:5285
谁能告诉我我做错了什么？ ：S
答案 0 :(得分：1)
以下是ngIntro文档的工作示例。检查项目中是否有问题。
var app = angular.module('myApp', ['angular-intro']);
app.controller('MyController', function ($scope) {
$scope.CompletedEvent = function (scope) {
console.log("Completed Event called");
};
$scope.ExitEvent = function (scope) {
console.log("Exit Event called");
};
$scope.ChangeEvent = function (targetElement, scope) {
console.log("Change Event called");
console.log(targetElement); //The target element
console.log(this); //The IntroJS object
};
$scope.BeforeChangeEvent = function (targetElement, scope) {
console.log("Before Change Event called");
console.log(targetElement);
};
$scope.AfterChangeEvent = function (targetElement, scope) {
console.log("After Change Event called");
console.log(targetElement);
};
$scope.IntroOptions = {
steps:[
{
element: document.querySelector('#step1'),
intro: "This is the first tooltip."
},
{
element: document.querySelectorAll('#step2')[0],
intro: "<strong>You</strong> can also <em>include</em> HTML",
position: 'right'
},
{
element: '#step3',
intro: 'More features, more fun.',
position: 'left'
},
{
element: '#step4',
intro: "Another step.",
position: 'bottom'
},
{
element: '#step5',
intro: 'Get it, use it.'
}
],
showStepNumbers: false,
exitOnOverlayClick: true,
exitOnEsc:true,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks'
};
$scope.ShouldAutoStart = true;
});<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://rawgit.com/usablica/intro.js/master/minified/introjs.min.css" />
<script type="text/javascript" src="//rawgit.com/usablica/intro.js/master/minified/intro.min.js"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="//rawgit.com/mendhak/angular-intro.js/master/build/angular-intro.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyController">
<div class="container-narrow">
<div ng-intro-options="IntroOptions" ng-intro-method="CallMe" ng-intro-oncomplete="CompletedEvent" ng-intro-onexit="ExitEvent" ng-intro-onchange="ChangeEvent" ng-intro-onbeforechange="BeforeChangeEvent" ng-intro-onafterchange="AfterChangeEvent" ng-intro-autostart="ShouldAutoStart">
<div class="masthead">
<ul id="step5" class="nav nav-pills pull-right">
<li><a href="https://github.com/mendhak/angular-intro.js/tree/master/build"><i class='icon-black icon-download-alt'></i> Download</a></li>
<li><a href="https://github.com/mendhak/angular-intro.js">Github</a></li>
</ul>
<h3 class="muted">ng-intro</h3>
</div>
<div class="jumbotron">
<h1 id="step1">Angular Intro.js</h1>
<p id="step4" class="lead">AngularJS directives for <a href="http://usablica.github.io/intro.js/" onclick="window.open(this.href);return false;">intro.js</a></p>
<a class="btn btn-large btn-success" ng-click="CallMe();">Demo</a>
<a class="btn btn-large btn-success" ng-click="CallMe(3);">Start at step 3</a>
</div>
<div class="row-fluid marketing">
<div id="step2" class="span6">
<h4>Setup</h4>
<p>Include the JS and CSS files for intro.js, and angular-intro.min.js. Add the module <code>angular-intro</code> to your app declaration.</p>
<h4>Options</h4>
<p>Set the options like so: <code>ng-intro-options="IntroOptions"</code>. Define <code>$scope.IntroOptions</code> in your controller. The format is exactly the same as the <a href="https://github.com/usablica/intro.js#options">original</a>.</p>
<h4>Method name</h4>
<p>Pick a method name, <code>ng-intro-method="CallMe"</code>. You can invoke the intro from elsewhere by calling <code>CallMe();</code>. You can also specify a step number using <code>CallMe(3);</code>. To autostart, use <code>ng-intro-autostart="true"</code></p>
<h4>Callbacks</h4>
<p>You can get callbacks to your controller using the <code>ng-intro-oncomplete</code>, <code>ng-intro-onexit</code>, <code>ng-intro-onchange</code>, <code>ng-intro-onbeforechange</code> and <code>ng-intro-onafterchange</code> directives.</p>
<p>See <a href="https://github.com/mendhak/angular-intro.js/blob/master/example/index.html">index.html</a> and <a href="https://github.com/mendhak/angular-intro.js/blob/master/example/app.js">app.js</a> for usage code.</p>
</div>
<div id="step3" class="span6">
<h4><a href="https://github.com/mendhak/angular-intro.js/tree/master/example">Example</a></h4>
<p>Set the options and method name:
</p>
<p>Options in the controller</p>
<p>Call it either way</p>
</div>
</div>
<hr>
</div>
</div>
</body>
</html>