-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
43 lines (38 loc) · 1.89 KB
/
script.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
39
40
41
42
43
var myApp = angular.module("myApp", []);
// Blur Text directive // by O.Tomer
// *********************************
myApp.directive("blurText", ['$sce', function($sce) {
return {
restrict: "E", //Element only
scope: {
text: "=", //Text content
minlength: "@", //Minimum length of text for dissapearing
disappearingchars: "@", //Number of characters to disappear
elementclass: "@"
},
template: '<div class="blurtext {{elementclass}}" ng-bind-html="safeDissapearingText"></div>',
replace: true,
transclude: false,
link: function(scope, element, attrs) {
var minLength = parseInt(scope.minlength);
var numOfOpacityChars = parseInt(scope.disappearingchars);
numOfOpacityChars = numOfOpacityChars > 0 ? numOfOpacityChars : 15;
var textLength = scope.text.length;
var textCopy = scope.text;
var textResult = textCopy;
if (textLength >= minLength) {
var textStart = textCopy.substring(0, textLength - numOfOpacityChars);
var textEnd = textCopy.substring(textLength - numOfOpacityChars, textLength);
textResult = "<span>" + textStart + "</span>";
for (var i = 0, len = textEnd.length; i < len; i++)
textResult += "<span>" + textEnd[i] + "</span>";
} else {
textResult = textCopy;
}
scope.safeDissapearingText = $sce.trustAsHtml(textResult);
}
}
}]);
myApp.controller("myCtrl", function($scope) {
$scope.messageContent = "Directives are the most important components of any AngularJS application. Although AngularJS ships with wide range of directives, you will often need to create application specific directives. This tutorial will give an overview of custom directives and explain how to use them in real world Angular projects. At the end of the tutorial, I will guide you through the creation of a simple note taking app with the help of Angular directives.";
});