Completely new to Angular and I can think of 100 different ways to accomplish this outside of Angular, but pushing myself to learn the Angular ways. My goal, I have an element that has plain text in it. I want to rotate that text every x seconds. Here's the base HTML:
<h2>Rotating text in Angular is <span>fun</span></h2>
The span is where I want the text to rotate from fun to 'sucks', 'awesome', 'hard', 'easy' every x number of seconds. A nice transition will also be included, but looking for the best way to implement the functionality using Angular. I've been looking into creating a directive and using Angular's interval, but not quite getting it.
It would be great if all the possible values could be included in the HTML, but I'm open to suggestions for the best way to do this.
Check this plunk I made:
rotating text in angularjs
Let's define a word array:
scope.wordArr=['fun','sucks', 'awesome', 'hard', 'easy'];
The directive
<span rotate-text></span>
rotates the words from the array every sec inside the span.
function updateWord(i) {
var j = (i + 1) % (scope.wordArr.length); // (i + 1) to start at second word
//so the j rotates like: 1, 2, 3, 4, 0, 1, 2,...
element.text(scope.wordArr[j]); //changes text inside span
}
element.text(scope.wordArr[0]); // displays "fun"
stopWord = $interval(updateWord, 1000); //executes 'updateWord' every second
As the $interval only starts working after the delay specified, we need to display the 1st word of the array outside the $interval, like so:
element.text(scope.wordArr[0]); //displays "fun"
Hence the need to start indexes in the $interval function at 1, not 0, by using (i + 1) instead of (i), like so:
var j = (i + 1) % (scope.wordArr.length);
Manipulating text in angular is quite straight-forward; The best way to accomplish this is to use the controller of the 'ngModel' which we usually call 'ngModelCtrl.' By creating a custom directive and telling it to require an 'ngModel' directive, you have access to this special controller which gives you an API to manipulate the text value of that 'ngModel.'
Here's the Plunker: http://plnkr.co/edit/I2HvpHn5AnnCCe8rtQOW
index.html
<body ng-app = "YourAppName"
ng-controller = "YourAppCtrl">
<h1>Hello Plunker!</h1>
<h2>Rotating text in Angular is <span ng-model = "currentAdjective" rotate-text > {{ currentAdjective }} </span></h2>
</body>
script.js
angular.module('YourAppName', []);
angular.module('YourAppName')
.controller('YourAppCtrl', function($scope) {
$scope.currentAdjective;
})
;
angular.module('YourAppName')
.directive('rotateText', function($interval) {
return {
require: 'ngModel',
link: function($scope, $elem, $attrs, ngModelCtrl) {
var adjectivesToRotate = ["sucks", "hard", "awesome", "easy"];
var lengthOfAdjectives = adjectivesToRotate.length;
var randomIndex = Math.floor(Math.random() * (lengthOfAdjectives));
var beginInterval = $interval(function() {
ngModelCtrl.$setViewValue(adjectivesToRotate[randomIndex]);
randomIndex = Math.floor(Math.random() * (lengthOfAdjectives));
}, 1000);
}
};
})
;
