craftpip / angular-confirm

A multipurpose plugin for alert, confirm & dialog for angular1

alerts, confirms and dialogs in one.

v1.1.0

Angular-confirm targets to make it really easy to use confirm dialogs with angular.
With angular-confirm you can harness the angular two-way data binding to update the content as well as make changes to the model in runtime.

A re-write of the jquery-confirm v3 plugin with all features.

• Define multiple buttons
• Trigger buttons on key up events
• Beautiful themes and animations
• All modal properties are two-way binded.
• Do things the angular way

View detailed features here Documentation & Examples

Installation

Download the latest release here and use the files within the dist directory

via Bower:
$ bower install angular-confirm1

via NPM:
$ npm install angular-confirm1

##Basic usage

The snippet below shows the most commonly used properties, there are more to find in the docs.

angular.module('myApp', ['cp.ngConfirm'])
.controller('myController', function($scope, $ngConfirm){
    $scope.hey = 'Hello there!';
    $ngConfirm({
        title: 'What is up?',
        content: 'Here goes a little content, <strong>{{hey}}</strong>',
        contentUrl: 'template.html', // if contentUrl is provided, 'content' is ignored.
        scope: $scope,
        buttons: {   
            // long hand button definition
            ok: { 
                text: "ok!",
                btnClass: 'btn-primary',
                keys: ['enter'], // will trigger when enter is pressed
                action: function(scope){
                     $ngConfirm('the user clicked ok');
                }
            },
            // short hand button definition
            close: function(scope){
                $ngConfirm('the user clicked close');
            }
        },
    });
});

Demo and Documentation

See Detailed Docs + Example here.

Issues

Please post issues and feature request here Github issues

Version changes

(coming in 1.11.0)

• remove jquery as dependency

(new in 1.1.0)

• Major performance fixes
• Fix memory leaks
• Removed ngAnimate and ngSanitize as dependencies
• added set methods to modal
• watchInterval property removed, content watch is now done with $digest
• button functions added
• theme fixes
• onScopeReady callback added

(new in 1.0.1)

• Added project to bower

Copyright and license

Copyright (C) 2016 angular-confirm

Licensed under the MIT license.

angular-confirm's Issues

Close current modal to show another

The plugin is nice but the problem is how can I show another modal and close the current when I click a link?

Digest Cycles Infinitely After $ngConfirm open and close

When we open up any #ngConfirm dialog on a page, the digest loop count just runs wild until the user leaves the page.

This is the case even when you close the dialog window. I've tried several ideas within my controller, including manually closing, setting the $ngConfirm object to a variable and then un-setting it, but the problem does not go away.

I don't think we can implement your library until this issue is fixed.

Love angular-confirm!

This is an awesome library! Thank you!

bower packages are important

What's happened?

Cannot copy text in modal dialog

I have tried Chrome and Firefox, and I am not able to copy text in modal dialog.
Not sure why. Could anyone explain to me?

NG confirm should be able to use as a service as well

This is a very good component but it should also support to call as a service in AngularJS as currently it supports only directive way.

Content Cropped

When I open the modal, if the content is longer than the initial height of the modal, it is cropped. If I close and re-open the same modal (or any modal that has extended content, it works fine.'.

The content is an image.

Has anyone else experienced this?

$ngConfirm is not a function

I am always getting this error.

Some scope watch may caused angular dirty check goes wrong.

In Line 481:

 _bindEvents: function () {
                    var that = this;
                    this._scope.$watch('[ngc.alignMiddle, ngc.offsetTop, ngc.offsetBottom]', function () {
                        that.setDialogCenter('bindEvents');
                    });

due to angular offical document (https://docs.angularjs.org/error/$rootScope/infdig ),those code may caused dirty check error.
I modified to this.

_bindEvents: function () {
          var that = this;
          var boxSets = [this._scope.ngc.alignMiddle, this._scope.ngc.offsetTop, this._scope.ngc.offsetBottom];
          this._scope.$watch(boxSets, function () {
            that.setDialogCenter('bindEvents');
          });

Accordion issue

Thanks for ng-confirm

How can show text buttons in lowercase ?

I define de text button like:
buttons: { accept: { text: 'Yes', ... } }, close: { text: 'No', ... } }

But I see YES and NO

Error: [jqLite:nosel]

I am getting this error when trying to call this

 $ngConfirm({
             title: 'Alert',
             icon: 'fa fa-info-circle',
             theme: 'supervan',
             content: '',
             animation: 'scale',
             closeAnimation: 'scale',
             buttons: {
                 ok: {
                     btnClass: "btn-blue",
                 },
                 close: function () {

                 }
             },
         })

Pure Angular 'angular-confirm'

It would be great to have the jQuery dependency taken off. Most would prefer the smallest footprint for their apps.

Angular-7 release

Hi, it would be grateful if you release plugin for angular. (version 2- 7)

There is ng2 version? or plan ?

angular-confirm requires jQuery

I am using Webpack with bootstrap 4 which is working fine. After I installed angular-confirm I am only receiving this message 'angular-confirm requires jQuery'.

Angular 5 version

When will you release the Angular 5 version of this component?

Can't opt out of default button styling

If you have to implement a custom design, the theme feature gets you most of the way there, but there's a bunch of built-in styles applied to the buttons that block any easy way of using custom button classes.

A config property that allows you to turn off default styling for buttons would be great, so that you don't have to counteract the offending styles in your custom class.

.ng-confirm .ng-confirm-box .ng-confirm-buttons button {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 4px;
    min-height: 1em;
    outline: 0;
    -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    border: none;
    background-image: none;
}

How to install?

Could somebody please give a more in-depth description of how I can add this to my angular project. I'm writing my project in typescript. I've npm installed the package files for this plugin. But I don't understand how I can start to use it in my project.

Un able to Interact with modal when it opens above the bootstep modal.

I'm unable to write in input unable to change the input value when I open jConfirm above the bootstrap modal.

Add position option

Ability to show the dialog at different places of the screen.

• top-left
• top-center
• top-right
• center-left
• center (default)
• center-right
• bottom-left
• bottom-center
• bottom-right

It would be great if you guys start developing a version for angular 4x

ControllerAs synax

Don't think I saw an option for this in the document, but 'ControllerAs' syntax would be nice to have. This would allow the ability to pass 'this' as scope. Not sure if the following will be helpful:

// controller declaration
var vm = this;
$ngConfirm({
    scope: vm
});

Need scope.$apply in version 1.1.0

On close function:
if (typeof this.onClose === 'function') this.onClose.apply(this, [this.scope]);
and in the setTimeout function:
if (typeof self.onDestroy == 'function') self.onDestroy.apply(self, [self.scope]);

These two functions will not emit anything to angular,so some angular function calls in onClose or onDestroy will not work properly like:
onDestroy: function () { $location.path($scope.backurl); return true; }

so I changed those code to:
if (typeof this.onClose === 'function') { this.onClose.apply(this, [this.scope]); self.scope.$parent.$apply(); }

to call angular apply the changes.

"Undefined is not a function" when escapeKey property is true

I get the following error in Chrome with the following:

1. These properties are set:
   escapeKey: true,
   backgroundDismiss: true

2. Press the "Escape" key when a confirm dialog window is open

The following error in the Chrome console comes up:

Uncaught TypeError: undefined is not a function

Popover style

Hi , is it possible a popover also like boostrap popover
Thank you

Text is not user selectable

In particular, this seems to be the offending line:

https://github.com/craftpip/angular-confirm/blob/master/css/angular-confirm.less#L69

This means if you use an alert to display any kind of important info, e.g. an error message, users won't be able to copy-paste that text, for example to report the problem, which is not helpful.

I know that I can override this with my own CSS, but libraries should not default to disabling built-in browser behaviour. Thanks!

Angular 14 support

I have a request concerning this library. Please, can we have Angular 14 support?

Draggable

I was looking at the jQuery plugin, and it had draggable feature.
Was that made possible through jQueryUi? And is it possible to port over that functionality without (preferably) jQueryUi? If that is not possible, then perhaps jQueryUi dependency could be optional. So if jQueryUi is not included, then draggable feature will not work.

ngShow / ngHide Classes Get Applied In The $$postDigest Phase Caused confirm box height error

Hi,
I'm using angular 1.5.9 and angular-confirm 1.1.0.

Due to this article:
https://www.bennadel.com/blog/2853-ngshow-nghide-classes-get-applied-in-the-postdigest-phase-in-angularjs-1-3.htm
If I use dom controller with ng-hide or ng-show in confirm box template, the digest will first update confirm box height, then the dom get updated.
so I changed some code on line 913~917 :

var thisBox = this;
          $timeout(function asyncTestCheck(){
            console.log($content.outerHeight());
            thisBox.$contentPane.css({
              'height': $content.outerHeight(),
            }).scrollTop(0);
            thisBox.$confirmBox.css(style);
          },0,false);

As a walkaround, I doesnt changed the calculate of contentHeight. Maybe could get fixed in next version.

Error jqLite

I got an error when run this

Error: [jqLite:nosel] http://errors.angularjs.org/1.6.2/jqLite/nosel
M/

any solution?

Enter key doesn't work when modal contains an input with the cursor in it

It works for any other key or when input is not focus. However, when both situations occur simultaneously, enter action doesn't get triggered.

is is possible to add icons to the text of the buttons?

How to pass parameters to ‘contentUrl’

// tpl/insuranceCard_mamanger.html   ng-controller="insuranceCardMamangerCtrl"
$scope.id = '123456';
$ngConfirm({
            title: 'card',
            contentUrl: 'tpl/insuranceCard_detail.html',
            buttons: {
            }
})

// tpl/insuranceCard_detail.html   ng-controller="InsuranceCardDetailCtrl"
$http.get('url', params: { id : $scope.id}).then(// do something);

how to pass '123456' to insuranceCard_detail.html?

angular-confirm on angular 8

Hi, I'm on angular 8 and I don't know how to do angular-confirm on it. Anybody can help me?

missing $digests

I don't currently have any solutions for this.
At least some of the time, the $digest loop is not executed after an action is performed. For example, if a button's action changes some model variable that should show up on the screen it will not show up until I force a $digest in some other way. I can do that with a call to scope.$apply() at the end of the action.

Close by controller

I have open the confirm box. Now I want to close this through controller not by clicking the close icon. How can I do that?

Input Example

Can you put an input example on your page? The one you have as an example works great but I can not find any examples of how you are defining it. What scope its using, If it is an inline template, whether you can defind it in a schema like you do the buttons etc. Thanks in advance.