I have to have something visible for 3-4 seconds. I am trying to use $timeout for achieving that. Here's what I got so far:
$timeout(function() {
debugger;
$scope.$on(broadcastService.topErrorBar.show,
function(event, message) {
$scope.rootElement.addClass('is-visible');
$scope.isVisible = true;
$scope.message = message;
});
}, 3000);
$timeout.cancel(function() {
$scope.close();
});
$scope.close = function() {
$scope.rootElement.removeClass('is-visible');
$scope.isVisible = false;
};
This is not working and I'm not able to resolve the issue. What am I doing wrong? Should I use a timeout in this case.
what about:
$scope.$on(broadcastService.topErrorBar.show,
function(event, message) {
$scope.isVisible=false;
$timeout(function () { $scope.isVisible= true; }, 3000);
});
you have to use in html ng-show="isVisible">
It should be like this :
$scope.$on(broadcastService.topErrorBar.show,
function(event, message) {
$scope.rootElement.addClass('is-visible');
$scope.isVisible = true;
$scope.message = message;
$timeout(function() {
$scope.close();
}, 3000);
$scope.close = function() {
$scope.rootElement.removeClass('is-visible');
$scope.isVisible = false;
};
On Broadcast , make element visible , start a timeout so that after 3 seconds $scope.close will be called. No need for $timeout.cancel in your case.
Your logic is inverted. The function in a timeout fires after the time has elapsed. You want the element to be visible, and then set visibility to false in your timeout function. Here's an example.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.visible = true;
$timeout(function () {
$scope.visible = false;
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
This is always visible.
<span ng-show="visible">This should hide after 3 seconds</span>
</div>
Related
I have a scenario where i need to show a div when a user provides input.
When a user continuously changes the input value the div must be shown and when the user stops providing input after 5 secs or so the div must be hidden.
Ctrl :
function MainCtrl($scope,$timeout) {
$scope.appear = false;
$scope.showDiv = function() {
debugger;
$scope.appear = true;
}
$scope.$watch('appear',
function(newValue, oldValue) {
if(newValue && newValue===true){
$timeout(function(){
$scope.appear=false;
}, 5000);
}
}
);
}
html:
<body ng-controller="MainCtrl">
Name: <input type="text" ng-change="showDiv()" ng-model="inputText"/> <br/>
<div ng-show="appear">Content</div>
</body>
DEMO
The issue i am facing here is when i continuously provide input the div at some point of time it is getting hidden and reappearing again.
But I need the div to be shown till the input is being provided and when a user stops providing any input after 5 secs it should disappear.
Any help would be appreciated.
I have made some changes to your plunkr, check this link https://plnkr.co/edit/EsiG3Ifgk0maYF4GJTGm?p=preview
angular.module('plunker', []).controller('MainCtrl',function($scope,$timeout) {
$scope.appear = false;
$scope.timerId;
$scope.showDiv = function() {
if($scope.timerId!=undefined){
clearTimeout($scope.timerId);
}
$scope.appear = true;
$scope.timerId = $timeout(function(){
$scope.appear=false;
},5000);
}
});
You should clear your timeout: https://plnkr.co/edit/wY4C1wvBZKJ7RSwtgnCv?p=preview
angular.module('plunker', []);
function MainCtrl($scope,$timeout) {
var timeout;
$scope.appear = false;
$scope.showDiv = function() {
// debugger;
$scope.appear = true;
if(timeout) {
console.log('timeout')
$timeout.cancel(timeout);
}
timeout = $timeout(function(){
$scope.appear=false;
}, 5000);
}
}
I got below code working :
$scope.showDiv = function () {
alert(1);
$('#divShow').show();
setTimeout("$('#divShow').hide();", 5000);
}
Write this in the controller and give that "divShow" id to div and remove ng-show thing.
This worked for me, Hope help you.
I've been doing a todo list with AngularJS and want to know if there's a way to focus on a input box after creating it by clicking on a button.
Actually, my save function inside the controller is defined like this:
$scope.save = function() {
$scope.objetivo.$save()
.then(function() {
$scope.message = {
text : 'Saved'
};
$scope.objective = new Objective();
})
.catch(function(err) {
console.log(err.data);
if(err.data.code === 11000) {
text = 'This objective is already registered'
}
$scope.message = {
text : text || "Error when saving"
};
});
};
I think there's might be a way by adding the input box and then focusing on it, but I don't know how to do it.
This fiddle shows you how to implement focus elements even on async logics.
View
<div ng-controller="MyCtrl">
<button ng-click="someAsyncFunction()">
Set focus on async functions
</button>
<input type="text"
set-focus="{{setFocus}}">
</div>
AngularJS Application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope, $timeout) {
$scope.someAsyncFunction = function ()
//the following timeout indicates ansyc functions.
$timeout(function () {
$scope.setFocus = true;
}, 250);
}
});
myApp.directive('setFocus', function($timeout) {
return {
scope: { trigger: '#setFocus' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === "true") {
$timeout(function() {
element[0].focus();
},250);
}
});
}
};
});
How can I check if I have to stop calling the loadMore() function, because all the documents have already been loaded from the database?
In the example below I'm using Ionic, but it's the same also with ng-infinite-scroll in AngularJS apps.
This is my actual code:
HTML:
...
<ion-infinite-scroll
ng-if="!noMoreItemsToLoad"
on-infinite="loadMore()"
distance="5%">
</ion-infinite-scroll>
</ion-content>
JS Controller:
$scope.loadMore = function(){
console.log('Loading more docs...');
Items.loadMore(); // calling the .next() method inside the Items service
if( !Items.hasNext()) { $scope.noMoreItemsToLoad = true; }
$scope.$broadcast('scroll.infiniteScrollComplete');
}
JS Items Factory:
.factory('Items', function (FIREBASE_URL, $firebaseArray, $firebaseObject) {
var itemsRef = new Firebase(FIREBASE_URL + 'items/');
var scrollRef = new Firebase.util.Scroll(itemsRef, 'name');
var self = {
getAllItems : function(){ ... },
loadMore: function(){
scrollRef.scroll.next(4);
},
hasNext: function(){
if(scrollRef.scroll.hasNext()) { return true; }
else { return false; }
}
}
return self;
}
Do the scroll.next in timeout, for example:
loadMore: function(){
$timeout(function() {
scrollRef.scroll.next(4);
});
},
I had the same issue and I think the solution is to modify the hasNext() function on firebase.util.js:
Cache.prototype.hasNext = function() {
return this.count === -1 || this.endCount >= this.start + this.count;
};
I put a missing equal sign (=) before this.start
I hope it works for you.
var app = angular.module('myapp', []);
app.controller('PopupCtrl', function($scope, $timeout){
$scope.show = 'none';
$scope.mouseover = function(){
console.log('Mouse Enter');
$scope.show = 'block';
};
$scope.mouseout = function(){
console.log('Mouse Leave');
var timer = $timeout(function () {
$scope.show = 'none';
}, 2000);
};
});
When I mouseover a button, a pop up dialog box is show. When I mouseout, the pop up dialog box is going to be hidden in two seconds. The problem come when I mouseover the button for the second time. Even my cursor is still on the button, the pop up dialog box is hide in two second. How to stop the timer when the mouse is over the button again?
The $timeout service returns a promise that can be cancelled using $timeout.cancel(). In your case, you have to cancel the timeout in every button mouse over.
DEMO
JAVASCRIPT
var app = angular.module('myapp', []);
app.controller('PopupCtrl', function($scope, $timeout){
var timer;
$scope.show = false;
$scope.mouseover = function(){
$timeout.cancel(timer);
$scope.show = true;
};
$scope.mouseout = function(){
timer = $timeout(function () {
$scope.show = false;
}, 2000);
};
});
Currently i am using angular js
I have one get method to get data from server side in default.html page
function bindActiveLoans() {
$http.get(rootUrlSingleEscaped + '/cooperativa/allunfundedloans/?authId=' + userInfo.UserId)
.success(function (response) {
if (response.Loans.length == 0) {
$scope.IsValues = false;
$scope.$apply();
return true;
}
$scope.IsValues = true;
$scope.unfundedLoans = response;
});
};
setInterval(function () {
$scope.$apply(bindActiveLoans());
}, 5000);
The above function helps to get the data from server side method in every 5 seconds.
Here, I have an issue.
Additionally I have some more pages, like
default2.html,default3.html,default4.html,default5.html.
The timer is still running while i navigation default.html page to default1.html page. I want to only that timer running in default.html page.If i go to another page,then the timer should stop. How can we achieve it?
From the angularjs example in the $interval API page.
var interval = $interval(function() {
console.log('say hello');
}, 1000);
$interval.cancel(interval);
With $interval.cancel(var) you can stop the interval and if you want to stop it when navigating to another page you should try something like this.
var interval = null;
module.controller('SomeController', '$interval', function($interval) {
interval = $interval(function() {
...
}, 2000);
}).run(['$rootScope', '$interval', function($rootScope, $interval) {
$rootScope.$on('$routeChangeStart', function() {
$interval.cancel(interval);
});
}]);
You can listen to the $routeChangeStart event and do the clearing of the interval depending on the route parameters,
$scope.$on('$routeChangeStart', function (scope, next, current) {
if(<next is not default.aspx>){
// clear interval here
}
});
call clearInterval function when navigating from default page
e.g.
var myVar = setInterval(function () {
$scope.$apply(bindActiveLoans());
}, 5000);
function myStopFunction()
{
clearInterval(myVar);
}
Call myStopFunction