I have an application that has two buttons , Add button and Schedule button ,
When i click on the add button the notification will be triggered then the notification tab will appeared .
Here is the code
Js code
app.controller('contNoti', function ($scope, $cordovaLocalNotification)
{
$scope.add = function () {
var alarmTime = new Date();
alarmTime.setMinutes(alarmTime.getMinutes() + 1);
$cordovaLocalNotification.add({
id: "1234",
date: alarmTime,
message: "This is a message",
title: "This is a title",
autoCancel: true,
sound: null
}).then(function () {
console.log("The notification has been set");
});
};
$scope.isScheduled = function () {
$cordovaLocalNotification.isScheduled("1234").then(function (isScheduled) {
alert("Notification 1234 Scheduled: " + isScheduled);
});
};
});
<ion-content ng-controller="contNoti">
<button class="button" ng-click="add()">Add notification</button>
<button class="button" ng-click="isScheduled()">Is Scheduled</button>
</ion-content>
Ok, what I need is to make the same application with the same functionality but without the buttons. I want it to be executed automatically without clicking on the buttons. Thanks
I'm not sure I understand your question, but you want to run $scope.add() no matter what, is that correct?
If so, just add $scope.add(); after the $scope.isScheduled = function () {...}; block.
I hope that's the answer you're looking for, otherwise, please provide more details.
You could trigger your methods with the events from $ionicView:
Inside your controller:
$scope.$on('$ionicView.enter', function(data) {
$scope.add();
$scope.isScheduled();
})
They will be executed once the User enter to the view.
Note: Those functions could be private(not attached to the $scope). Because they wont be used in the View.
Related
I guys, in my previous post here I ask how to comunicate between 2 controllers, inside the same file. I have a button where I pass a name inside ng-click with a tab name. When i click in this button the goal is to open a new view in the specified tab inside ng-click.
Each controller have a view instantiated with ng-controller, so they dont share the same view.
At now I have,
dashboardController:
button inside datatable :
return icon = '<center><a class="state-link" data-state-id="' + data.id + '" ng-click="setActiveTab(\'system\')"><i style="color:#0040ff; width:21px; height:21px" title="System threshold exceed" class="fa fa-warning"></i></a></center>';
controllerScope.setActiveTab = function (name) {
console.log("setActiveTab()");
console.log("name ",name);
$rootScope.$broadcast('myCustomEvent', name);
}
dashboardDeviceController:
Here I have the var i want to change
controllerScope.activeTab = {
consumptions: true,
network : false,
ap : false,
modem : false,
system : false,
};
$rootScope.$on('myCustomEvent', function(event, data) {
console.log("myCustomEvent ", data);
for (var tabName in controllerScope.activeTab) {
if (controllerScope.activeTab[tabName] == data) {
controllerScope.activeTab[tabName] = data;
break;
}
}
});
I have a problem and when I click in the button nothing happen.. so is there a problem with $rootScope.on or $rootScope.broadcast??? I cant figure this out ...
you should use $scope to broadcast and `subscribe,
So, change controllerScope.$broadcast('myCustomEvent', name); to $scope.$broadcast('myCustomEvent', name);
controllerScope.setActiveTab = function (name) {
console.log("setActiveTab()");
console.log("name ",name);
$scope.$broadcast('myCustomEvent', name);
}
Have a look at the accepted answer here
You can either broadcast on $rootScope, to have the whole app hear it, or if you don't want to, you need to make sure that the broadcast is meant for the $scope itself and its children. In summary, one controller should be a child of the other.
I am trying to figure out how to make the following $ngConfirm box update after a function is completed.
After submit is clicked, the following appears (the cog is spinning):
$scope.inProgress = function(){
$ngConfirm({
theme: 'modern',
icon: "fa fa-cog fa-spin fa-.5x fa-fw",
title: 'File is downloading Please wait.',
content: "",
buttons: {
}
});
};
After this box is displayed, the function doSomething() gets called. Once that function returns, I would like to update the display to the following (the cog stops):
$scope.Complete = function(){
$ngConfirm({
theme: 'modern',
icon: "fa fa-cog fa-.5x fa-fw",
title: 'Spreadsheet Generated!',
content: "File size is {$scope.fileSize}, Do you want to save it?",
buttons: {
'Yes, save my file': {
downloadStuff();
$ngConfirm('Spreadsheet saved to "Downloads" folder.');
},
'No, take me back': {
action: function(){
$ngConfirm('Download has been cancelled.');
}
}
}
});
};
And this is the way I currently have it set up in the submit() function inside my controller:
$scope.submit = function() {
$scope.inProgress();
$scope.doSomething();
$scope.Complete();
};
Using the above code, my application displays both elements layered over eachother. I am stuck trying to figure out how to make $scope.inProgress() update with the details inside $scope.Complete() once $scope.doSomething() returns.
Could someone offer me some advice on what changes I need to make? I've tried to tinker with $scope.inProgress at the end of the submit function, but I always end up displaying a new confirm box or not actually changing something.
My current idea is something along the lines of
$scope.ConfirmationControl = function() {
$scope.inProgress(){
storageService.doSomethingCool().then(
$scope.inProgress() = //updated elements
)
}
}
Does that make sense? Am I close or thinking about this totally wrong?
Thank you in advance for your help! :)
Angular Confirm
There is an example of how to change content on the site. https://craftpip.github.io/angular-confirm/#quickfeatures. Under the Features header you can click on the button labeled "Dialogs" to see an example. Basically you will need to put everything in the content: option with some scope variables. When doSomething() is done, set a $scope variable ($scope.somethingWasDone in this case) and in your dialog have the ng-if. Below is an untested example.
$scope.inProgress = function(){
$scope.title = 'File is downloading. Please wait.';
$ngConfirm({
scope: $scope,
icon: "fa fa-cog fa-spin fa-.5x fa-fw",
content: '<h2>{{title}}</h2>' +
'<div ng-if="somethingWasDone">' +
'<div>File size is 250kb, do you want to save it?</div>' +
'<button ng-click="downloadStuff()">Yes</button>' +
'<button ng-click="cancel()">No</button>' +
'</div>'
});
};
// when your doSomething function is done
$scope.doSomething().then(function(result) {
$scope.title = 'Spreadsheet Generated!';
$scope.somethingWasDone = true;
});
Just adding the bootstrap-confirmation extension for Bootstrap popover to some buttons on a project. I'm having issues with the options not being respected. I'm trying to get the popups to work as singletons and dismiss when the user clicks outside of them singleton and data-popout options, respectively - both set to true. I'm also not seeing any of my defined callback behavior happening.
I defined the options both in the HTML tags and in a function and neither works. Still getting multiple boxes and they don't dismiss as expected.
My JS is loaded after all other libraries and is in my custom.js file in my footer.
JS is as follows:
$(function() {
$('body').confirmation({
selector: '[data-toggle="confirmation"]',
singleton: true,
popout: true
});
$('.confirmation-callback').confirmation({
onConfirm: function() { alert('confirm') },
onCancel: function() { alert('cancel') }
});
});
An example of the box implemented on a button in my HTML is the following:
<a class="btn btn-danger" data-toggle="confirmation" data-singleton="true" data-popout="true"><em class="fa fa-trash"></em></a>
Any pointers would be appreciated. I even changed the default options in the bootstrap-confirmation.js file itself to what I want and still no luck.
Turns out I needed to rearrange a couple things to get this to work. I've left in the last_clicked_id etc stuff as I needed to add that to get the id value of what I'd just clicked.
// Product removal popup logic
var last_clicked_id = null;
var last_clicked_product = null;
$('.btn.btn-danger.btn-confirm').click(function () {
last_clicked_id = $(this).data("id");
last_clicked_product = $(this).data("product");
});
$('.btn.btn-danger.btn-confirm').confirmation({
singleton: true,
popout: true,
onConfirm: function () {
alert("DEBUG: Delete confirmed for id : " + last_clicked_product);
// TODO: Add AJAX to wipe entry and refresh page
},
onCancel: function () {
alert("DEBUG: Delete canceled for id : " + last_clicked_product);
}
});
I was a step ahead of myself with the callback logic which was not getting executed. Fixed by simply adding it to onConfirm: and onCancel: key values in the .confirmation() function. A bit of a RTFM moment there but this was unfortunately not very clear in the documentation.
I am new to ionic. I am using onHardwareBackButton event of ionic, the event is working correct it is taking me to register function but after going to register function it is still navigating to back page.
I am showing cordova confirm dilogbox on hardwarebackbutton event function so after clicking on cancle he can navigate to back page, but now the popup is also coming and page is also navigating back same time.I have searched and tried many code like
e.preventDefault()
e.stopPropagation()
both of them are not workign
I have tried registerBackButtonAction event also but it is not getting deregister when i leave page.
I am stuck with this problem from many hours.
The code which I am using is given below..
//this is register event i have used
showalertPopup = function(){
//showing popup
}
$scope.$on '$ionicView.enter', (event, view)->
$ionicPlatform.registerBackButtonAction showalertPopup, 100
//like this i am diregistering event
$scope.$on '$ionicView.leave', (event, view)->
$ionicPlatform.offHardwareBackButton showalertPopup
in place of registerBackButtonAction i have used onHardwareBackButton
What you can do here is registerBackButtonAction with priority 100 (see docs):
The priorities for the existing back button hooks are as follows:
Return to previous view = 100
Close side menu = 150
Dismiss modal = 200
Close action sheet = 300
Dismiss popup = 400
Dismiss loading overlay = 500
so, basically, you're overriding the "Return to previous view" action.
You're going to need a handler to de-register when you're leaving the view:
var backbuttonRegistration = null;
$scope.$on('$ionicView.enter', function(event, viewData) {
backbuttonRegistration = $ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
showalertPopup();
}, 100);
});
$scope.$on('$ionicView.leave', function(event, viewData) {
if (backbuttonRegistration)
{
backbuttonRegistration();
}
});
According to the documentation, registerBackButtonAction :
Returns: A function that, when called, will deregister this
backButtonAction.
Your controller should look something like this:
.controller('homeController', function($scope, $ionicPopup, $ionicPlatform) {
function showalertPopup() {
var alertPopup = $ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
});
alertPopup.then(function(res) {
console.log('Thank you for not eating my delicious ice cream cone');
});
}
var backbuttonRegistration = null;
$scope.$on('$ionicView.enter', function(event, viewData) {
backbuttonRegistration = $ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
showalertPopup();
}, 100);
});
$scope.$on('$ionicView.leave', function(event, viewData) {
if (backbuttonRegistration)
{
backbuttonRegistration();
}
});
});
PS:
You can registerBackButtonAction with the highest priority of all - let's say 1000 - and it will work:
backbuttonRegistration = $ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
showalertPopup();
}, 1000);
I need to use the showModalDialog method to display a message to a user, which will also need to have two buttons, a "Yes" and "No" but unsure how to approach this method.
I am using IE8 and unsure how to declare this and how I need to assign this that will also cater for both "Yes" and "No" options.
If "No" is pressed, I basically want the showModalDialog closed, with no further action required by the user.
If "Yes" is pressed, I then want it to go off and call a JavaScript function.
I have looked online but I can't seem to find any examples relating to what I am after here.
I am seeking links to good examples that relates to my requirement above.
If you are using jQuery, then you would use it's powerfull widget library http://jqueryui.com
DEMO: http://so.devilmaycode.it/help-with-showmodaldialog-together-with-selections
IMPLEMENTATION:
$(function() {
var external_data = "i'm outside the func";
$('.show-modal-dialog').click(function(e) {
var internal_data = "i'm inside the call";
var a = this;
e.preventDefault();
$("#dialog-message").dialog({
title: 'this is a modal dialog',
modal: true,
open: function(event, ui) {
$(this).append(a.href); //append inside the Dialog it self
},
buttons: {
'Yes': function() {
alert(a.href + ' ' + external_data + ' ' + internal_data);
},
'No': function() {
$(this).dialog("close");
}
}
});
});
});
BODY:
<div id="dialog-message"><p>Lorem Ipsum Est</p></div>
<a class="show-modal-dialog" href="http://www.google.it">Show Modal Dialog</a>
If you are using jquery.ui you, checkout this sample. If you don't want to use jquery.ui, take a look at Block.UI plugin.