-
Notifications
You must be signed in to change notification settings - Fork 235
/
directive.js
38 lines (38 loc) · 1.87 KB
/
directive.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Here we have the directive that we append to the body. It handles all the things related to the
// styling and DOM
angular.module('ngProgress.directive', [])
.directive('ngProgress', ["$window", "$rootScope", function ($window, $rootScope) {
var directiveObj = {
// Replace the directive
replace: true,
// Only use as a element
restrict: 'E',
link: function ($scope, $element, $attrs, $controller) {
// Watch the count on the $rootScope. As soon as count changes to something that
// isn't undefined or null, change the counter on $scope and also the width of
// the progressbar. The same goes for color and height on the $rootScope
$scope.$watch('count', function (newVal) {
if (newVal !== undefined || newVal !== null) {
$scope.counter = newVal;
$element.eq(0).children().css('width', newVal + '%');
}
});
$scope.$watch('color', function (newVal) {
if (newVal !== undefined || newVal !== null) {
$scope.color = newVal;
$element.eq(0).children().css('background-color', newVal);
$element.eq(0).children().css('color', newVal);
}
});
$scope.$watch('height', function (newVal) {
if (newVal !== undefined || newVal !== null) {
$scope.height = newVal;
$element.eq(0).children().css('height', newVal);
}
});
},
// The actual html that will be used
template: '<div id="ngProgress-container"><div id="ngProgress"></div></div>'
};
return directiveObj;
}]);