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);
Related
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();
}
I have a InAppBrowser working fine in my app
$scope.openInAppBrowser = function (url) {
var ref = window.open(encodeURI(url), '_blank', 'location=yes');
ref.addEventListener('loadstop', function (event) {
if (event.url.match("close")) {
$scope.refreshGamePage = 1; // this variable is under watch in a directive
ref.close();
}
});
}
here is the directive written to refresh the page
module.directive('reloadPage', ['$http', function ($http) {
return {
restrict: 'A',
link: function ($scope, element, attrs) {
$scope.refreshPage = function () {
if($scope.refreshGamePage ==1)
return true;
else
return false;
};
$scope.$watch($scope.refreshPage, function (v) {
if (v) {
$scope.setGamePage(); // this function will contains code to refresh game page
}
});
}
};
}]);
but it seems like loadstop event listener is unable to update scope variable.
Can anyone help me with this?
Basically idea is I want to refresh current page (one from which InAppBrowser opened) in my app as soon as InAppBrowser closes itself.
Any better way to achieve this will be appreciated.
Just use angular $apply() method to change the value of angular
variables because it is changed out of angularjs turn.
$scope.openInAppBrowser = function (url) {
var ref = window.open(encodeURI(url), '_blank', 'location=yes');
ref.addEventListener('loadstop', function (event) {
if (event.url.match("close")) {
$scope.$apply(function () {
$scope.refreshGamePage = 1;
});
ref.close();
}
});
}
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)();
How to add ng-swipe-left and ng-swipe-right using angular-touch library to navigate angularUI datepicker next & previous months ?
I added the plunker here
$scope.Next = function() {
$scope.$evalAsync(function() {
angular.element(document.querySelector('.pull-right')).triggerHandler('click');
});
};
$scope.Previous = function() {
$scope.$evalAsync(function() {
angular.element(document.querySelector('.pull-right')).triggerHandler('click');
});
};
From the plunker code , I am getting Error: $rootScope:inprog
Action Already In Progress from browser console.
Used $timeout service.working good.
$scope.Next = function () {
$timeout(function () {
angular.element(document.querySelectorAll('.pull-right')[0]).triggerHandler('click');
});
};
$scope.Previous = function () {
$timeout(function () {
angular.element(document.querySelectorAll('.pull-left')[0]).triggerHandler('click');
});
};
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