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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
/**
* uiShow Directive
*
* Adds a 'ui-show' class to the element instead of display:block
* Created to allow tighter control of CSS without bulkier directives
*
* @param expression {boolean} evaluated expression to determine if the class should be added
*/
angular.module('ui.directives').directive('uiShow', [function () {
return function (scope, elm, attrs) {
scope.$watch(attrs.uiShow, function (newVal, oldVal) {
if (newVal) {
elm.addClass('ui-show');
} else {
elm.removeClass('ui-show');
}
});
};
}])
/**
* uiHide Directive
*
* Adds a 'ui-hide' class to the element instead of display:block
* Created to allow tighter control of CSS without bulkier directives
*
* @param expression {boolean} evaluated expression to determine if the class should be added
*/
.directive('uiHide', [function () {
return function (scope, elm, attrs) {
scope.$watch(attrs.uiHide, function (newVal, oldVal) {
if (newVal) {
elm.addClass('ui-hide');
} else {
elm.removeClass('ui-hide');
}
});
};
}])
/**
* uiToggle Directive
*
* Adds a class 'ui-show' if true, and a 'ui-hide' if false to the element instead of display:block/display:none
* Created to allow tighter control of CSS without bulkier directives. This also allows you to override the
* default visibility of the element using either class.
*
* @param expression {boolean} evaluated expression to determine if the class should be added
*/
.directive('uiToggle', [function () {
return function (scope, elm, attrs) {
scope.$watch(attrs.uiToggle, function (newVal, oldVal) {
if (newVal) {
elm.removeClass('ui-hide').addClass('ui-show');
} else {
elm.removeClass('ui-show').addClass('ui-hide');
}
});
};
}]);
|
