Angular Intro.js

Setup

Include the JS and CSS files for intro.js, and angular-intro.min.js. Add the module angular-intro to your app declaration.

Include in your controller: ngIntroService.

Options

Not required, but both works well together
Set the options like so: ng-intro-options="IntroOptions". Define $scope.IntroOptions in your controller. The format is exactly the same as the original.

Method name

Pick a method name, ng-intro-method="CallMe". You can invoke the intro from elsewhere by calling CallMe();. You can also specify a step number using CallMe(3);. To autostart, use ng-intro-autostart="true"

Callbacks

You can get callbacks to your controller using the ng-intro-oncomplete, ng-intro-onexit, ng-intro-onchange, ng-intro-onbeforechange and ng-intro-onafterchange directives.

See index.html and app.js for usage code.

Example

[using Directives]Set the options and method name:

<div ng-controller="MyController"
     ng-intro-options="IntroOptions"
     ng-intro-method="CallMe" ...
    
		               

[using Controller] Set the options and start :

var introOptions = {};
ngIntroService.clear();
ngIntroService.setOptions(introOptions);
		               

Options in the controller

$scope.IntroOptions = {
steps:[
{
    element: '#step1',
    intro: "First tooltip"
},
{
    element: '#step4',
    intro: "Second tooltip",
    position: 'right'
},
...
		            

Call it either way

<button ng-click="CallMe();">Go</button>

$scope.CallMe();

[service]ngIntroService.start();