I've made an interval:
$interval($scope.sendGetRequest, 1500)
The function is sending $http.get request every 1500ms. I want to stop this interval when closing the modal, because it is still sending the request within the interval even when I'm closing the modal.
What's the event that is triggered when the modal is being closed, so I can stop the interval there?
** I'm inside the modal scope, I want to stop the interval there before the modal is closed.
you probably want to stop the $interval when the $scope gets destroyed (modal closed).
This should be inside the controller of your modal:
var poll = $interval($scope.sendGetRequest, 1500);
$scope.$on('$destroy', stopPolling);
function stopPolling() {
$interval.cancel(poll);
};
You have to store your interval definition in a variable.
var myInterval = $interval(function() {
// Do something
}, 1500);
Then when you want to stop it, use cancel method of $interval.
$interval.cancel(myInterval);
Documentation
in Your Controller :
$scope.openDialog = function () {
var dialogIns = function () {
var dialogInstance = $uibModal.open({
animation: true,
templateUrl: 'modalHtmlPage.html',
controller: 'modalController',
});
};
}
and in your modal controller:
var intVal = $interval(function () {
//$http.get request
}, 1500);
$scope.closeModal = function () {
$interval.cancel(intVal);
$uibModalInstance.close();
}
Related
How to call function every 10 seconds? $timeout and setTimeout calling the function dataTime only one time, I would like repeating this constantly with no end.
angular
.module('sfcLeftSiteBar')
.component('leftSiteBar', {
templateUrl: '/Panel/LeftSiteBar/Templates/_leftSiteBar.html',
controller: ['$http', '$window', '$state', '$scope', '$timeout', function ($http, $window, $state, $scope, $timeout) {
function dataTime() {
$http.post('/LeftSiteBar/TimeProvider').then(function (result) {
console.log("czas" + JSON.stringify(result))
$scope.datatime = result.data;
console.log("czas2" + JSON.stringify($scope.datatime))
})
}
// $timeout(dataTime, 10000);
setTimeout(dataTime, 10000);
}]
})
Angularjs has a built-in $interval, you should use it instead of regular setInterval:
controller: ['$interval', '$scope', function($interval, $scope) {
function dataTime() {
console.log('function works');
}
// start interval
var interval = $interval(dataTime, 10000);
// call this method to stop interval
$scope.stop = function() {
$interval.cancel(interval);
};
}
More info about $interval
You can use setInterval instead of setTimeout, like so:
setInterval(dataTime, 10000);
In order to be able to clear the interval at a later date, you need to assign a variable the return value of setInterval and then call clearInterval with your interval as parameter, like so:
var myInterval = setInterval(dataTime, 10000);
//clear interval at some point
clearInterval(myInterval);
But since you are using AngularJS, you might use the built-in interval method that takes care of any changes that might happen in the called function and automatically trigger a digest cycle.
var angularInterval = $interval(dataTime, 10000);
And cancel it like so:
$interval.cancel(angularInterval);
Use angularjs $interval service to handle that. It is a angular service and comes with all you need in your application
stop = $interval(function() {
dataTime();
}, 100);
You can also cancel the continous execution if you want.
if (angular.isDefined(stop)) {
$interval.cancel(stop);
stop = undefined;
}
<html>
<body>
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<p>After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on forever...</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
setInterval(function(){ alert("Hello"); }, 3000);
}
</script>
</body>
</html>
it will execute for every 20 secs
setInterval(function(){
$scope.callingFunction();// we can write any function
}, 20000)
I'm trying to use $ionicModal.
when I call $scope.codeModal.show(); modal pops up but immediately disapears. but when I click on the modal , it appears.
here is my Angular code:
$ionicModal.fromTemplateUrl('templates/resetCodeTemplate.html', {
scope: $scope
})
.then(function (modal) {
$scope.codeModal = modal;
});
$scope.resetBaseCodeShow = function () {
$scope.codeModal.show();
};
any Idea why it happens?
Use $timeout.
$scope.closeModal = function () {
$scope.codeModal.hide();
};
$timeout($scope.closeModal, 5000);
I have a View that is updated after 1 minute, I stop the timer after before leaving this view, and all is OK.
After returning to the current view the timer don't restart again.
This is the code of the controller of this view:
.controller('IndexCtrl', function($scope, $timeout, RestService) {
var updateN = 60*1000;
$scope.test = "View 1 - Update";
var update = function update() {
timer = $timeout(update, updateN);
/** make a http call to Rest API service and get data **/
RestService.getdata(function(data) {;
$scope.items = data.slice(0,2);
});
}();
/** Stop the timer before leave the view**/
$scope.$on('$ionicView.beforeLeave', function(){
$timeout.cancel(timer);
//alert("Before Leave");
});
/** Restart timer **/
$scope.$on('$ionicView.enter', function(){
$timeout(update, updateN);
//alert("Enter");
});
})
.controller('ViewCtrl2', function($scope) {
$scope.test = "View 2";
});
I resolve the problem,
There is not a problem with the cache, but with the function update that is not called after I re-enter on the page.
I move the update function inside the $ionicView.enter :
The corrected code is:
$scope.$on('$ionicView.beforeLeave', function(){
//updateN=12000000;
$timeout.cancel(timer);
//alert("Leave");
});
$scope.$on('$ionicView.enter', function(){
//updateN=12000000;
var update = function update() {
timer = $timeout(update, updateN);
RestService.getdata(function(data) {
//console.log(tani);
//$scope.items = data;
$scope.items = data.slice(0,2);
});
}();
});
When you go back to current view, it comes from the cache, so the controller does not work again. You can disable caching in the config section of your app by adding this line of code :
$ionicConfigProvider.views.maxCache(0);
or you can disable cache on a specific view in the routing part by addding
cache : false property.
More information here and here
In your code your controller function does not call on change of view. call $timeout function outside of var update function. Each time view loads it call its controller and call anonymous or self executing functions in their scope.
.controller('IndexCtrl', function($scope, $timeout, RestService) {
var updateN = 60 * 1000;
$scope.test = "View 1 - Update";
var update = function update() {
var timer = $timeout(update, updateN);
/** make a http call to Rest API service and get data **/
RestService.getdata(function(data) {;
$scope.items = data.slice(0, 2);
});
}();
/** Stop the timer before leave the view**/
$scope.$on('$ionicView.beforeLeave', function() {
$timeout.cancel(timer);
//alert("Before Leave");
});
/** Restart timer **/
$scope.$on('$ionicView.enter', function() {
timer()
});
})
.controller('ViewCtrl2', function($scope) {
$scope.test = "View 2";
});
I am new using angular material and i have a question about the possibility to put a sidenav modal,
Today i tried to use the sidenav it works perfectly but i need another option, i want to disallow the closure of this sidenav using 'esc' from keyboard or clicking out the sidenav.
Here is an exemple with the sidenav by default.
CODEPEN EXAMPLE
//Javascript : from codepen
angular.module('MyApp').controller('AppCtrl', function ($scope,$timeout, $mdSidenav, $mdUtil, $log) {
$scope.toggleRight = buildToggler('right');
/**
* Build handler to open/close a SideNav; when animation finishes
* report completion in console
*/
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function(){
$mdSidenav(navID)
.toggle()
.then(function () {
$log.debug("toggle " + navID + " is done");
});
},300);
return debounceFn;
}})
.controller('RightCtrl', function ($scope, $timeout, $mdSidenav, $log) {
backdrop : 'static',
$scope.close = function () {
$mdSidenav('right').close()
.then(function () {
$log.debug("close RIGHT is done");
});
};
});
I found "backdrop:static" and "keyboard:false" options but it doesn't work. Or i don't know how to do it.
If somebody know a solution it will be cool !
You can set the md-is-locked-open attribute after the sidenav is opened. E.g. use a scope flag in your event handler:
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function(){
$mdSidenav(navID)
.toggle()
.then(function () {
$scope.isLockedOpen = true;
});
},300);
...
and then in your template use sth like
<md-sidenav class="md-sidenav-right" md-component-id="right" md-is-locked-open="isLockedOpen">
sorry for making an answer that late ...
I just forgot two braces in the last code line :
},300); become },300)();
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function(){
$mdSidenav(navID)
.toggle()
.then(function () {
$scope.isLockedOpen = true;
});
},300)();
I want to open an Modal Dialog (angular-ui), but when the open() function is called, the data are not available. Data are loaded by a resource call so there's a delay.
I tried to play with the promise opened, but data are not changed.
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
mydata: function() {
return "Loading...";
}
}
});
modalInstance.opened.then(function() {
$scope.mydata = $scope.loadData();
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.loadData = function() {
$timeout( function(){
$log.info("data loaded");
return "data loaded...";
}, 3000)
};
Something is missing in my understanding between the resolve property, the modal promises and the deferred loading.
(I would like to use restangular to load the resource).
Here is the sample :
http://plnkr.co/edit/Mj6JolD06DUJd6N6ECYi
Thanks in advance for any clue
You are mostly there. The problem is in the way you coded the loadData function. Since you are doing an asynchronous call you can't just do a return of data like that. Instead, what you can do is in your loadData you can call a function on the modalInstance that will set a value in the $scope of the modal.
So in your ModalInstanceCtrl you can add a function like this:
$modalInstance.setMyData = function(theData) {
$scope.mydata = theData;
};
And then you can call that in your loadData like this:
$scope.loadData = function(aModalInstance) {
$log.info("starts loading");
$timeout(function() {
$log.info("data loaded");
aModalInstance.setMyData("data loaded...");
}, 3000);
};
You also need to make sure that you pass the instance of the modal when you call loadData:
modalInstance.opened.then(function() {
$scope.loadData(modalInstance);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
I created an updated plunk so you can see how it works: http://plnkr.co/edit/M7qfegYIOqOQekoxLaj5?p=preview