Looking to integrate a method that detects user typing behavior with a service. This method updates an info variable by setting its text to "typing" or leaving it blank.
I am considering using this method as a service for my Angular model. The challenge is that the method requires access to the text variable {{info}} which resides within the view (HTML).
How can I make this work? Here's my code snippet below...
javascript file
mymodule.controller("cntrlChat", ['$scope','isUserTypingService',
function($scope,isUserTypingService){
$scope.isUserTyping=function(){
isUserTypingService($scope.info);
}
}]);
mymodule.factory('isUserTypingService',['$q','$timeout', function($q,$timeout) {
var isUserTyping= function(info) {
runTwoFunctionWithSleepBetweenThem(function (){info='user is typing...';},function (){info='';},3500);
};
var runTwoFunctionWithSleepBetweenThem=function(foo1, foo2, time) {
$q.when(foo1()).then(() => $timeout(foo2, time));
}
return isUserTyping;
}]);
index.html
<html>
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0968676e7c65687b27637a4938273d2771">[email protected]</a>" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<div ng-app="mymodule" ng-view>
</div>
</html>
chat.html
{{info}}