As part of my Angular JS 1 learning journey, I am working on a small test involving text areas that display text using Angular functions when a user enters and exits them. The enter function has a 3-second delay, while the exit function waits for 5 seconds. It's all functioning as expected at the moment.
The challenge now is to prevent the functions from binding text to the text area if the user does not wait for the specified timeout periods. I believe promises might be the key here, but I'm struggling with this aspect.
var myApp = angular.module('myApp', []);
function checkTimeout() {
console.log("Timeout is working...");
}
myApp.filter('rawHtml', ['$sce', function($sce){
return function(val) {
return $sce.trustAsHtml(val);
};
}])
myApp.controller("MyCtrl", function($scope, $timeout){
$timeout(checkTimeout, 3000);
$scope.data = [{
"id": 1,
"act": ""
}, {
"id": 2,
"act": ""
}, {
"id": 3,
"act": ""
}, {
"id": 4,
"act": ""
}, {
"id": 5,
"act": ""
}, {
"id": 6,
"act": ""
}, {
"id": 7,
"act": ""
}, {
"id": 8,
"act": ""
}, {
"id": 9,
"act": ""
}];
$scope.enter1 = function(num) {
$timeout (function(){num.act = " - enter";}, 3000 );
}
$scope.exit1 = function(num) {
$timeout (function(){num.act = " - exit";}, 5000 );
}
})
HTML:
<body ng-app="myApp">
<div ng-controller="MyCtrl" style="width:100%;margin:10px;">
<p>How can I stop the functions enter1 and exit1 from binding text to the textarea if the user does not wait the 3 seconds (enter1) and 5 seconds (exit1) for them to execute?</p>
<div style="float:right; width:49%;">
<div ng-repeat="num in data" style="margin:3px;">
<textarea ng-focus="enter1(num)" ng-blur="exit1(num)">{{ num.id }}{{ num.act }}</textarea>
</div>
</div>
</div>
</body>
Here's the fiddle: https://jsfiddle.net/mediaguru/q3qt5frk/