Why does Angular JS count wrong clicks? - angularjs

I have Angular JS code:
$scope.click = function (id) {
notificationsModal.confirm(function () {
$scope.$apply(function () {
console.log(id);
if(id == "test"){
$scope.contacts.blocked = $scope.contacts.blocked + 1;
}
});
}
}
When I do click I get confirm JS window with cancel button. I push this button for canceling event. I do this operation 4 ones.
After I confirm message and get 4 outputs console.log(id); in console. Why does it work for each click if I did cancel and condition had not been executed?

Related

How on Button Delete method first get variable data than prompt for message ? My code attached

I am trying to update record using Angular js method my html is like,
<button type="button" ng-click="delete()">'Update'</button>
delete method calling on angular js is,
$scope.delete = function () {
tasksService.getData($scope.ids).then(function (d) {
var result = JSON.parse(d.data.data);
});
if (confirm("Sure to update status +'result.name'+ For building?")) {
}
}
This code gets call on click but moved to last line confirmation after clicking on OK button later it call getData method i get result in var result
Actually i need to show some data from result in Confirmation Text
Hopes for your suggestions thanks
Try to show the confirm message in the success of the getData(). This will make the control wait for the response of getData().
$scope.delete = function () {
tasksService.getData($scope.ids).then(function (d) {
var result = JSON.parse(d.data.data);
if (confirm("Sure to update status " + result.name + "For building?")) {
}
});
}
This might help
Pass some value when function is called
HTML
<button type="button" ng-click="delete(value)">'Update'</button>
JS
$scope.delete = function (value) { // passed value
tasksService.getData($scope.ids).then(function (d) {
var result = JSON.parse(d.data.data);
if (confirm("Sure to update status " + value.name + "For building?")) {
}
});
}

angularjs: $interval call never happen after it's cancelled

I've a requirement where as soon as i load a page it makes makes api call and
shows data on the page. and after every 15 sec it keeps loading the data an shows and i've a popup that has a click button function(ConfigModalButtonClick ). When i open the popup i wanted to stop the interval that makes the api call so for that i added $interval.cancel when popup is open but now when i click the button in popup the api call never happen. how can i make sure api call happens it looks like i need to call interval function again somewhere but not sure where??
the interval should run normally after 15 sec when i close the popup.
$scope.timeDelay = 15000;
$scope.loadData = function() {
$http.post(url,data
).then(
function(response) {
$scope.output = response.data;
},
function(response) {
$scope.retrieveErrorMssg = "Failed to retrieve required data. Try again.";
});
};
var interval = $interval(function() {
$scope.loadData();
}, $scope.timeDelay);
$scope.showConfigurationModal = function() {
$interval.cancel(interval);
$scope.state.settingModalVisible = true;
};
$scope.closeConfigurationModal = function() {
$scope.state.settingModalVisible = false;
// Need to explicitly trigger the dismiss function of the modal
$scope.settingModalDismiss();
};
$scope.ConfigModalButtonClick = function () {
$scope.state.settingModalVisible = false;
//some data manipulation
$scope.loadData();
};

Ionic Exit APP not working

I'm trying to set ng-click="ionic.Platform.exitApp()" to a button but it dosen't work, i also tried ng-click="exitApp()" and ng-click="$ionic.Platform.exitApp()"but it dosen't work either.
I'm using Ionic Creator, according to this docs http://ionicframework.com/docs/api/utility/ionic.Platform/ it should be quite simple, but i don't know how to correctly set this adjust. I also tryied to add a module into Ionic Creator as:
angular.module('app.exit', []).exit(function($scope) {
ionic.Platform.ready(function(){
// will execute when device is ready, or immediately if the device is already ready.
});
var deviceInformation = ionic.Platform.device();
var isWebView = ionic.Platform.isWebView();
var isIPad = ionic.Platform.isIPad();
var isIOS = ionic.Platform.isIOS();
var isAndroid = ionic.Platform.isAndroid();
var isWindowsPhone = ionic.Platform.isWindowsPhone();
var currentPlatform = ionic.Platform.platform();
var currentPlatformVersion = ionic.Platform.version();
ionic.Platform.exitApp(); // stops the app
});
Adding this module console log prints: "exit is not a function"
Thanks
You can always try to use this ExitApp Plugin
To use, add the plugin by cordova plugin add cordova-plugin-exitapp and then add the following code to your app.js
angular.module('XYZApp', ['ionic'])
.run(function($ionicPlatform, $ionicHistory, $rootScope) {
$ionicPlatform.ready(function() {
// For exit on back button press
$ionicPlatform.registerBackButtonAction(function(e) {
if ($rootScope.backButtonPressedOnceToExit) {
navigator.app.exitApp(); // or // ionic.Platform.exitApp(); both work
} else if ($ionicHistory.backView()) {
$ionicHistory.goBack();
} else {
$rootScope.backButtonPressedOnceToExit = true;
// "Press back button again to exit" : show toast
setTimeout(function() {
$rootScope.backButtonPressedOnceToExit = false;
}, 2000); // reset if user doesn't press back within 2 seconds, to fire exit
}
e.preventDefault();
return false;
}, 101);
});
}
Thanks Chiragh Dewan,
But it dosen't work either, i added this:
angular.module('XYZApp', []).run(function($ionicPlatform, $ionicHistory, $rootScope) {
$ionicPlatform.ready(function() {
// For exit on back button press
$ionicPlatform.registerBackButtonAction(function(e) {
if ($rootScope.backButtonPressedOnceToExit) {
navigator.app.exitApp(); // or // ionic.Platform.exitApp(); both work
} else if ($ionicHistory.backView()) {
$ionicHistory.goBack();
} else {
$rootScope.backButtonPressedOnceToExit = true;
// "Press back button again to exit" : show toast
setTimeout(function() {
$rootScope.backButtonPressedOnceToExit = false;
}, 2000); // reset if user doesn't press back within 2 seconds, to fire exit
}
e.preventDefault();
return false;
}, 101);
});
}
);
... into a new JS file called exit.js
Then i added the module XYZApp into the Ionic Creator code settings Angular modules
The last step i added the cordova-plugin-exitapp
I tryied ng-click="navigator.app.exitApp()" and ng-click="ionic.Platform.exitApp()" and none of them seems to work.
U can see the project here: https://creator.ionic.io/share/html/2d9b0126751e#/menu/contacto
Thanks

How to call print function in new window after page is loaded?

Ok i have this button :
and i have this function for confirm ticket:
$scope.ConfirmTicketPayOut = function (ticketPin, username)
{
$scope.ticketPin = ticketPin;
localStorage.setItem("ticketPin", ticketPin);
accountDataProviderService.confirmTicketPayOut(ticketPin, username)
.then(function (response) {
$scope.confirmTicketPayOut = response;
if ($scope.confirmTicketPayOut.Result == true)
{
var w = $window.open('/account/ticketprint');
angular.element(w).bind('load', function () {
w.print();
});
}
});
}
I have problem because when user click on button i need to open new window with data and to call print option. In this case i get print option and new window is open but the page is blank so my conclusion is that page is loaded after print option is appeared. I need to load page and show print option at same time, but without $timeout. Is that possible?
Try using angular event viewContentLoaded. call your method after this event is fired.
Example
$scope.$on('$viewContentLoaded', function() {
// Your method call
}

looking for "angular way" of closing open menu when page is clicked

This is what I have, and it works (thankfully, angular supports jQuery out of the box if its loaded)....but I'm wondering what the "angular way" is to accomplish this.
I want to close the open menu if you click anywhere else on the page, but the menu:
<body ng-click="onClickPage($event)">
//app controller:
$scope.onClickPage = function(e){
$log.log(e);
$rootScope.$broadcast('click:page', e);
};
//navbar controller
$rootScope.$on('click:page', function(ev, e){
var $el = $(e.target);
if ( !$el.parents('.menu').length && !$el.hasClass('.menu') ) {
$log.log('hide dropdown');
$scope.hideDropdown();
}
});
That might depend on how your dropdown is implemented but a general idea is to bind/unbind click event handler to the $document when open/close the dropdown.
By doing this way,it doesn't polute global event listeners and $rootScope while the dropdown is not opened.
function onDocumentClicked(e) {
var dropdownEl = angular.element('.dropdown');
if (e && dropdownEl && dropdownEl[0].contains(e.target)) {
return; // do nothing if clicked inside the dropdown
}
closeDropdown();
$scope.$apply();
}
function openDropdown() {
if (!$scope.dropdown.isOpen) {
$scope.dropdown.isOpen = true;
$document.bind('click', onDocumentClicked);
}
}
function closeDropdown() {
if ($scope.dropdown.isOpen) {
$document.unbind('click', onDocumentClicked);
$scope.dropdown.isOpen = false;
}
}
For the full example see: http://plnkr.co/edit/mbx0sLnPetctlWNYdpJC?p=preview

Resources