oitozero / ngsweetalert Goto Github PK

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..

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

I have a problem with the function call back, suddenly stop working. I don't have errors in the console.

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.

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

I include in my file app.js oitozero.ngSweetAlert. but i have this error. ReferenceError: SweetAlert is not defined

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");
    }
});

Hi @oitozero ,
We are cdnjs team and we want to host the library.
I found that the latest version on GitHub is v1.1.1 but on NPM is v1.1.0. Could you please publish the latest versions on npm to make it consistent? Thank you.

cdnjs/cdnjs#9028

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.*

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

when the first time you click button to show confirm modal,the content of button will show very slowy.

is there a way to close an alert explicitly?

Sample:

SweetAleart.close();

That would be appreciated :)

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?

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.

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!

There is some way to fix it?

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.

I want to add custom loader instead of 3 dot loader for Load on Confirm.

I mean I want to following loader

Instead of following

Is this possible?

It would be awesome if you could update for 1.4 and tag the repo for bower

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

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; }

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.

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");
}
});
}

http://sweetalert2.github.io/

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.

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.

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

It would be great if it could be updated to Sweet Alert 2, which allows for HTML instead of just text inside the alert.

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

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

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?

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.

I assume it will be MIT because sweetAlert uses MIT.
I'm thinking of integrating ngsweetalerts in to the mean.io project.

e.g.:
if(html==true){
var linkFn = $compile(text);
var content = linkFn(scope);
...
}

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.

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.

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

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.

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 ?

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.

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....

needed: jquery

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);
 });

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.

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?

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?