oitozero / ngsweetalert Goto Github PK
View Code? Open in Web Editor NEWAngularJS wrapper for SweetAlert
License: MIT License
AngularJS wrapper for SweetAlert
License: MIT License
It would be awesome if you could update for 1.4 and tag the repo for bower
is there a way to close an alert explicitly?
Sample:
SweetAleart.close();
Looks like sweetalert has been upgraded to 1.0.1. This breaks angular-sweetalert.
Need to force the dependency to be 0.5.0
https://github.com/oitozero/ngSweetAlert/blob/master/bower.json#L28
Hello,
First, thanks for your tool, it makes integration with angular very easy.
What would be a proper way to close programmatically an alert created with ngSweetAlert (like swal.close() does)?
FYI my usecase can't work with the integrated timeout alone : I am repeating an apiCall with an $interval while a custom sweetalert with a spinner animated icon is displayed : I'd like to dismiss the sweet alert when I receive the proper $http.sucess() answer .
thanks for your suggestions.
Julien
is there anything preventing to support angular 1.3? it doesnt seems so.
I've tried to install it through bower, and here's the result:
bower ngSweetAlert#* ENOTFOUND Package ngSweetAlert not found
And ngSweetAlert is not listed as a bower package: http://bower.io/search/?q=ngSweetAlert
e.g.:
if(html==true){
var linkFn = $compile(text);
var content = linkFn(scope);
...
}
There is some way to fix it?
showInputError
is documented in sweet alert, but appears to not be supported yet for ngSweetAlert
Sweet alert docs:
swal.showInputError
error:
SweetAlert.showInputError is not a function
This error shows when trying bower install, this is probably because, i have angular 1.3.* already in my bower.json, and yours(angular) is on 1.2.*
Hi,
Is there a specific reason why you used $timeout
? The difference with the vanila SweetAlert is quite noticeable and feels less performed because of it.
Currently when the swal callback function is called outside angular's digest cycle. This requires us to do something like this:
SweetAlert.swal({
title: 'Are you sure?',
text: '',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, delete it.',
cancelButtonText: 'No, cancel.',
closeOnConfirm: true,
closeOnCancel: true
}, function(isConfirm) {
if (isConfirm) {
$scope.$apply(function() {
delete(whatever);
});
}
});
It seams like something ngSweetAlert should handle.
when i try to use bower to install it. it shows dependency to ~1.2.0, but inside this repository the dependency has already been updated to ~1.3.0. Anyone can tell me what happens?
when the first time you click button to show confirm modal,the content of button will show very slowy.
Looks like an issue with the underlying sweet alert library but wanted others to be aware if they were using the angular wrapper. See this issue: t4t5/sweetalert#391
Hiya There.
I tried implementing this with a "isConfirm" callback similar to the example on the main project demo and the "isConfirm" variable is not being recognized:
SweetAlert.swal({
title: "Are you sure?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!"
},
function(isConfirm) {
if (isConfirm) {
SweetAlert.swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
SweetAlert.swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
Any ideas?
Thanks!
for some reason is confirm is always false;
$scope.remove = function (item)
{
SweetAlert.swal({
title: "Are you sure?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
SweetAlert.swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
SweetAlert.swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
}
That would be appreciated :)
I include in my file app.js oitozero.ngSweetAlert
. but i have this error. ReferenceError: SweetAlert is not defined
There is an "embedded" way to customize the alert width (to show huge text..)?
Otherwise I should override the negative margin to center the modal, I would avoid that..
Hi,
it's possible to have a callback function when the alert close with timer?
I've tried with
SweetAlert.swal({
title: _t("Login successful"),
showConfirmButton: false,
timer: 1500,
type: "success"
},
function(){
console.log("Hello callback")
});
but nothing happens.
I'm missing something?
Thanks for the awesome work!
\m
It would be nice if the MIT license was already included in SweetAlert.min.js.
It would save a step for some folks, and I'm sure you want credited.
I assume it will be MIT because sweetAlert uses MIT.
I'm thinking of integrating ngsweetalerts in to the mean.io project.
I want to use Sweet Alert
for get radio button value in Angularjs. Is there a way to get selected radio button value. I am using SweetAlert v1.1.3
anf ngSweetAlert
directive.
SweetAlert.swal({
title: "Please Select:",
text: '<form> <div class=""> <input type="radio" name="csvSelect" id="radio1" ng-model="radioValue" ng-value="1" > <label for="radio1"> Whole records </label> </div> <div class=""> <input type="radio" name="csvSelect" id="radio2" ng-model="radioValue" ng-value="2" ng-click="getVal()"> <label for="radio2"> Selected records </label> </div></form>',
html: true,
showCancelButton: true,
confirmButtonText: "Download it!",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: true,
showLoaderOnConfirm: true
},
function (isConfirm) {
if (isConfirm) {
SweetAlert.swal("Deleted!", $scope.radioValue, "success");
}
});
the div width is 478px and margin-left is -239px.
.sweet-alert { background-color: white; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 478px; padding: 17px; border-radius: 5px; text-align: center; position: fixed; left: 50%; top: 50%; margin-left: -256px; margin-top: -200px; overflow: hidden; display: none; z-index: 99999; }
I am unable to get the showLoaderOnConfirm
animation working in both ngSweetAlert or ngSweetAlert2 using the following syntax:
swal({
title: 'Forgot Password?',
text: 'Enter your email address and your password will be reset and emailed to you.',
input: 'email',
showCancelButton: true,
confirmButtonText: 'Send',
confirmButtonColor: "#DD6B55",
inputPlaceholder: 'Email address',
showLoaderOnConfirm: true,
preConfirm: function( email ) {
return new Promise(function( resolve, reject ) {
setTimeout(function() {
AccountFactory.resetAccount( email )
.then(function( data ) {
swal({
title: 'Success!',
text: 'A verification email has been sent to ' + email,
type: 'success',
confirmButtonText: 'Close',
allowEscapeKey: false
});
}, function() {
swal({
title: 'Email not found',
text: 'Sorry, but we could not find an account matching that email address.',
type: 'error',
confirmButtonText: 'Close',
allowEscapeKey: true
});
});
}, 2000 );
});
},
allowOutsideClick: false
});
I understand preConfirm
was introduced in ngSweetAlert2
, but the showLoaderOnConfirm
was not working for me in version 1 either, hence moving to version 2.
I'm just wondering if this functionality is actually supported in the Angular wrappers, or I'm doing something wrong?
basically i'm trying to add an input field inside the text property and access the scope value :
$scope.deleteTask = function (id, row) {
SweetAlert.swal({
title: "Are you sure?",
text: "<input ng-model='deleteAll' type='checkbox' /><h6>Delete All Tasks Created By The Same Operation </h6> ",
type: "warning",
html : true,
showCancelButton: true,
confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel !",
closeOnConfirm: false,
closeOnCancel: false,
showLoaderOnConfirm: true
},
function (isConfirm) {
if (isConfirm) {
console.log($scope.deleteAll);
} else {
SweetAlert.swal("Cancelled", "Your task is safe :)", "error");
}
});
}
$scope.deleteAll returns undefined :/
Edit :
I figured out that the "divs" were created outside the wrapper which has ng-scope reference,i think it would be great if we can specify the id of the container that we want to use to create the divs inside
non angular version has this example:
swal({
title: "Are you sure?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success);
});
After you click the "Yes, delete it!" button, it displays the alert in sweet alert until you click OK.
On angular version it disappears immeadiatly after split second OR doesn't show up at all. In your examples:
SweetAlert.swal({
title: "Are you sure?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!"
},
function(){
alert("Booyah!");
});
you have a basic alert in the success function. If you put SweetAlert.swal("Deleted!", "Your imaginary file has been deleted.", "success"); it doesn't stay displayed
Any ideas?
I have a problem with the function call back, suddenly stop working. I don't have errors in the console.
I'm trying to use an input type text on a sweet alert but it's not working and there's a log with "SweetAlert: Unknown alert type: input".
I'm using AngularJS and coffescript.
Any help?
Thanks.
Here's my swal:
$scope.updateState = (_state) ->
swal {
title: "Give \"" + _state.key + "\" a new name!"
text: "You will change this state name"
type: "input"
inputPlaceHolder: "State name"
showCancelButton: true
confirmButtonColor: "#387596"
confirmButtonText: "Save"
closeOnConfirm: true
},(inputValue) ->
console.log inputValue
installed everything as told.
My application works in all, sometimes even the SweetAlert works too.
But in one controller i can't get it to work!
$scope.test = function() {
SweetAlert.swal("Hello world");
}
template: Say hi
gives me an immediate TypeError: Cannot set property 'value' of null
.
What's the problem? All arguments are injected correctly into my controller, the order is correct- no thing is missing. The rest of the code works perfect.
Repo tags should be updated to the same version as in bower.json (currently v1.0.4), so Bower could see it has changed and users can update their dependencies.
It would be great if it could be updated to Sweet Alert 2, which allows for HTML instead of just text inside the alert.
The performance is way off compared to the original https://github.com/t4t5/sweetalert in the demos.
Especially when used on mobile devices or in web apps where dialogs are used alot and require a smooth feeling, it certainly feels slower on rendering / opening dialogue boxes and actions.
Also if you click too quickly on Yes in the multi-step modal @demo(http://oitozero.github.io/ngSweetAlert/#/home) section -> (... and by passing a parameter, you can execute something else for "Cancel".) the dialogue will close without opening the second.
If I use angular-sweetalert and angular-animate in the same project I start to have some issues. When an sweetalert message comes up and I press okay the screen is locked and dimmed. I have to refresh the browser to get it to work correctly. I had to not include ng-animate to get things to work correctly.
It seems the bower package is out of date...
Can the sweetAlert version this library requires be updated from "version": "0.5.0" to the later "version": "1.1.3".
That is unless im missing something here....
I am trying to get these 2 settings to work so the confirm button gets disabled when clicked to prevent multiple submission, but it doesnt work:
SweetAlert.swal({
title: "Are you sure?",
text: "This will delete it",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, Delete!",
cancelButtonText: "No, Cancel!",
closeOnConfirm: false,
closeOnCancel: false,
disableButtonsOnConfirm: true, // Doesnt Work
showLoaderOnConfirm: true // Doesnt Work
})
Are those 2 not supported in the Angular Sweetalert? I am using it on Angular 1.3.
It can be reproduced in the
demo , in the example: A warning message, with a function attached to the "Confirm"-button
If you press cancel, the callback is executed anyway.
I tried with Chrome in linux version 48 and didn't work, however I tried in Chrome in OX and it works, also with firefox and safari.
I install the lib by bower and when I do something like:
SweetAlert.swal("Here's a message");
I got the error:
Cannot set property 'value' of null
My angular version is 1.4.10.
Do you know how I can fix that, or what is happens ?
Is it possible to use the success icon as a standalone?
I'm already using the sweet alert for the project but i like the icon effect a lot! and I'm not very good at doing those types of animations,
I tried to add it and it works but the check sign is the only one that does the animation not the circle.
I am not sure why, but when I am in a chrome tab which is incognito mode, the alert box doesn't show.
I am not sure what to say about this. It might be me?
The is the code for "A message with a custom icon":
SweetAlert.swal({ title: "Sweet!", text: "Here's a custom image.", imageUrl: "http:://oitozero.com/avatar/avatar.jpg"
The imageUrl is http:://oitozero.com/avatar/avatar.jpg
This has an extra colon and should be http://oitozero.com/avatar/avatar.jpg
Didn't know how else to let you guys know so I posted it here.
cann you make a directive for it?
$http.get(templateUrl).then(function(response) {
var template = angular.element(response.data);
var linkFn = $compile(template);
var templateElement = linkFn(scope);
var elm = element.find("div[name=content]");
elm.append(templateElement);
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.