Skip to content

Commit f5af8d9

Browse files
author
Moritz Meyer
committed
Using $parse to evaluate the incoming attributes
1 parent 7a6c752 commit f5af8d9

File tree

2 files changed

+105
-97
lines changed

2 files changed

+105
-97
lines changed

‎angular-intro.js‎

Lines changed: 57 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,58 @@
1-
var ngIntroDirective = angular.module('angular-intro',[]);
2-
3-
// TODO: Use isolate scope, but requires angular 1.2: http://plnkr.co/edit/a2c14O?p=preview
4-
// See: http://stackoverflow.com/questions/18796023/in-a-directive-handle-calls-to-a-user-defined-method-name
5-
6-
ngIntroDirective.directive('ngIntroOptions', ['$timeout', function ($timeout) {
7-
8-
return {
9-
restrict: 'A',
10-
11-
link: function(scope, element, attrs){
12-
13-
scope[attrs.ngIntroMethod] = function(step) {
14-
15-
if(typeof(step)=="string"){
16-
var intro = introJs(step);
17-
}
18-
else{
19-
var intro = introJs();
20-
}
21-
22-
intro.setOptions(scope.$eval(attrs.ngIntroOptions));
23-
24-
if(attrs.ngIntroOncomplete){
25-
intro.oncomplete(scope[attrs.ngIntroOncomplete]);
26-
}
27-
28-
if(attrs.ngIntroOnexit){
29-
intro.onexit(scope[attrs.ngIntroOnexit]);
30-
}
31-
32-
if(attrs.ngIntroOnchange){
33-
intro.onchange(scope[attrs.ngIntroOnchange]);
34-
}
35-
36-
if(attrs.ngIntroOnbeforechange){
37-
intro.onbeforechange(scope[attrs.ngIntroOnbeforechange]);
38-
}
39-
40-
if(attrs.ngIntroOnafterchange){
41-
intro.onafterchange(scope[attrs.ngIntroOnafterchange]);
42-
}
43-
44-
if(typeof(step)=="number"){
45-
intro.goToStep(step).start();
46-
}
47-
else{
48-
intro.start();
49-
}
50-
51-
};
52-
53-
54-
if(attrs.ngIntroAutostart == "true"){
55-
//Only runs when DOM is ready
56-
$timeout(function() {scope[attrs.ngIntroMethod]();}, 0);
57-
}
58-
}
59-
}
1+
var ngIntroDirective = angular.module('angular-intro', []);
2+
3+
/**
4+
* TODO: Use isolate scope, but requires angular 1.2: http://plnkr.co/edit/a2c14O?p=preview
5+
* See: http://stackoverflow.com/q/18796023/237209
6+
*/
7+
8+
ngIntroDirective.directive('ngIntroOptions', ['$timeout', '$parse', function ($timeout, $parse) {
9+
10+
return {
11+
restrict: 'A',
12+
link: function(scope, element, attrs) {
13+
14+
scope[attrs.ngIntroMethod] = function(step) {
15+
16+
if(typeof(step) === 'string') {
17+
var intro = introJs(step);
18+
} else {
19+
var intro = introJs();
20+
}
21+
22+
intro.setOptions(scope.$eval(attrs.ngIntroOptions));
23+
24+
if(attrs.ngIntroOncomplete) {
25+
intro.oncomplete($parse(attrs.ngIntroOncomplete)(scope));
26+
}
27+
28+
if(attrs.ngIntroOnexit) {
29+
intro.onexit($parse(attrs.ngIntroOnexit)(scope));
30+
}
31+
32+
if(attrs.ngIntroOnchange) {
33+
intro.onchange($parse(attrs.ngIntroOnchange)(scope));
34+
}
35+
36+
if(attrs.ngIntroOnbeforechange) {
37+
intro.onbeforechange($parse(attrs.ngIntroOnbeforechange)(scope));
38+
}
39+
40+
if(attrs.ngIntroOnafterchange) {
41+
intro.onafterchange($parse(attrs.ngIntroOnafterchange)(scope));
42+
}
43+
44+
if(typeof(step) === 'number') {
45+
intro.goToStep(step).start();
46+
} else {
47+
intro.start();
48+
}
49+
};
50+
51+
if(attrs.ngIntroAutostart == 'true') {
52+
$timeout(function() {
53+
$parse(attrs.ngIntroMethod)(scope)();
54+
});
55+
}
56+
}
57+
}
6058
}]);

‎example/app.js‎

Lines changed: 48 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,60 @@ var app = angular.module('myApp', ['angular-intro']);
22

33
app.controller('MyController', function ($scope) {
44

5-
$scope.CompletedEvent = function () { console.log("Completed Event called"); };
5+
$scope.CompletedEvent = function () {
6+
console.log("Completed Event called");
7+
};
68

7-
$scope.ExitEvent = function () { console.log("Exit Event called");};
9+
$scope.ExitEvent = function () {
10+
console.log("Exit Event called");
11+
};
812

9-
$scope.ChangeEvent = function () { console.log("Change Event called"); };
13+
$scope.ChangeEvent = function () {
14+
console.log("Change Event called");
15+
};
1016

11-
$scope.BeforeChangeEvent = function () { console.log("Before Change Event called"); };
17+
$scope.BeforeChangeEvent = function () {
18+
console.log("Before Change Event called");
19+
};
1220

13-
$scope.AfterChangeEvent = function () { console.log("After Change Event called"); };
21+
$scope.AfterChangeEvent = function () {
22+
console.log("After Change Event called");
23+
};
1424

1525
$scope.IntroOptions = {
16-
steps:[
17-
{
18-
element: document.querySelector('#step1'),
19-
intro: "This is the first tooltip."
20-
},
21-
{
22-
element: document.querySelectorAll('#step2')[0],
23-
intro: "<strong>You</strong> can also <em>include</em> HTML",
24-
position: 'right'
25-
},
26-
{
27-
element: '#step3',
28-
intro: 'More features, more fun.',
29-
position: 'left'
30-
},
31-
{
32-
element: '#step4',
33-
intro: "Another step.",
34-
position: 'bottom'
35-
},
36-
{
37-
element: '#step5',
38-
intro: 'Get it, use it.'
39-
}
40-
],
41-
showStepNumbers: false,
42-
exitOnOverlayClick: true,
43-
exitOnEsc:true,
44-
nextLabel: '<strong>NEXT!</strong>',
45-
prevLabel: '<span style="color:green">Previous</span>',
46-
skipLabel: 'Exit',
47-
doneLabel: 'Thanks'
48-
};
26+
steps:[
27+
{
28+
element: document.querySelector('#step1'),
29+
intro: "This is the first tooltip."
30+
},
31+
{
32+
element: document.querySelectorAll('#step2')[0],
33+
intro: "<strong>You</strong> can also <em>include</em> HTML",
34+
position: 'right'
35+
},
36+
{
37+
element: '#step3',
38+
intro: 'More features, more fun.',
39+
position: 'left'
40+
},
41+
{
42+
element: '#step4',
43+
intro: "Another step.",
44+
position: 'bottom'
45+
},
46+
{
47+
element: '#step5',
48+
intro: 'Get it, use it.'
49+
}
50+
],
51+
showStepNumbers: false,
52+
exitOnOverlayClick: true,
53+
exitOnEsc:true,
54+
nextLabel: '<strong>NEXT!</strong>',
55+
prevLabel: '<span style="color:green">Previous</span>',
56+
skipLabel: 'Exit',
57+
doneLabel: 'Thanks'
58+
};
4959

5060
});
5161

0 commit comments

Comments
 (0)