likeastore/ngdialog

Modals and popups provider for Angular.js applications

ngdialog's Issues

Non-modal and draggable dialogs

Correct me if these features are already possible, but I need some of my dialogs to be draggable, and non-modal.

Draggable functionality doesn't need to be built into the library, but the issue I'm having is that the top element in my template is draggable, but this element is nested within the created ngdialog-content element, meaning that whilst my template is draggable, it doesn't take the dialog with it. Perhaps if there were an option to replace the element rather than nest the template within it (like Angular directives can), this would be a non-issue?

Would also be nice to have an option for dialogs to be non-modal - i.e. no click-blocker and no blackout effect.

Great library otherwise, very simple and effective!

Thoughts?

animationEndEvent don't fire

Closing of dialogs doesn't work, because of animationEndEvent failure.
I'm using angular 1.3.0-18, and ngDialog 0.3.0.
I've set var animationEndSupport = false temporarily to fix this.

Bootstrap?

Will this work with Bootstrap 3 modals/dialogs?

it 's possible to pass a variable to the template ??

I have this code:
show = (post_id) ->
ngDialog.open({
template: '<%= asset_path("angular/templates/posts/post.html.erb") %>',
data: post_id
});

i need to pass post_id to post.html.erb template, it's possible??
thanks.

How to obtain the modal ID?

We want to use a custom close button that besides closing the dialog, also triggers some other functions:

<a ng-click="closeDialog()" >Close</a>

$rootScope.closeDialog = function () {
    // Do some stuff here
    ngDialog.close(dialogID);
}

How do we get the dialogID?

Thanks!

Directive should have an option to close other dialogs before opening a new one

I prefer using the directive version rather than the api, since I keep the template paths inside the actual template files and not inside the controllers. Problem is that when I want to follow a chain of dialogs say: login->reset password->success, I have to use the api version to close the previous dialog first (maybe calling close all or even better having the option to pass an id which call close and if empty calls closeAll.

Multiple clicks => multiple opens

I have an app with a lot of ngDialog, when I click multiple times fastly on button, ngDialog opens multiple times too.

I've try preventDefault on 'ngDialog.opened' event, but that's don't work...

Have you a general solution or It's required too make it with hand and some booleans on each dialog ?

Thanks in advance !

Scrollable on entire page

Hi there,

do you see a good way to allow for vertical scrolling outside of the dialog-content itself, i.e. on the overlay?

My Problem is that I've got a dialog which needs to be scrolled and it is kind of confusing that this is only possible if the cursor is over the dialog. I tried to work around this problem by giving the content 100% width and making its background transparent. However, this has a negative effect on the closeByDocument behavior (as it doesn't really work any more 😏). I want both, full page scrolling and clicking outside the dialog to close.

Do you get the picture?

Thanks in advance

Add support for passing in data to when the dialog closes, and chaining on the open method

UI Bootstrap contains a $modal service, and $modal.open returns a promise, which can be used via $modal.open(...).result.then to pass a value back to the place the dialog is opened - I propose that this would be a good feature to add to this plugin.

Flip transition is not smooth in Safari 7

If you click the green button in the demo modal dialog, left side of the modal dialog remains half-opaque until then the animation is complete, and then it abruptly turns to normal opacity. This issue does not happen in the latest version of Firefox and Google Chrome.

Can this modal be triggered by a custom route?

Kind of like how Trello cards work...

please use keydown event for capturing 'esc' key

When a ngDiaglog opened, if you opened a browser dialog such as 'Save image as...', then press 'esc' key to close it, the keyup event will still be sent to your listener, but the keydown won't.

Option to use ngDialog like a notification service

Would it be possible to have an option in order to be able to use the service like toaster (https://github.com/jirikavi/AngularJS-Toaster) by deactivating the overlay (autoclosing) and eventually specifying a timeout in config ?

Like the following :

ngDialog.toast({
    template: 'templateId',
    className: 'ngdialog-theme-toaster',
    close: 500
});

How to cross scope?

There is an input in ngDialog,when i change the model "name",the {{name}} in the dialog is right,bug the outside scope can't catch the model "name",how can i get the ngDialog's scope?

$scope.name = "default value";

$scope.showCreateLayer = function(){

    ngDialog.open({
        template: '<div class="ngdialog-message"><input type="text" ng-model="name" />{{name}}</div>'+
            '<div class="ngdialog-buttons">'+
            '<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog()">Cancel</button>'+
            '<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="create()">OK</button></div>',
        plain: true,
        scope:$scope
    });
};

$scope.create = function(){
    console.log($scope.name);//always be 'default value'

    if($scope.name == ""){
        $window.alert("The name can't be null.");
        return;
    }
};

---

Finally i solve this problem as:

$scope.dialogData = '{"name":"default value"}';

$scope.showCreateLayer = function(){

    ngDialog.open({
        template: '<div class="ngdialog-message"><input type="text" ng-model="ngDialogData.name" />{{ngDialogData.name}}</div>'+
            '<div class="ngdialog-buttons">'+
            '<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog()">Cancel</button>'+
            '<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="create(ngDialogData)">OK</button></div>',
        plain: true,
        data:$scope.dialogData ,
        scope:$scope
    });
};

$scope.create = function(opts){
    console.log(opts.name);//This will be right

    if(opts.name == ""){
        $window.alert("The name can't be null.");
        return;
    }
};

External templates

When opening a dialog with an external template (ex "assets/templates/template.html") it renders [object Object]. The fetched template is returned as an object with the regular { data: ..., config: ..., status: ... } etc. Where the property data contains the actual html. Is this intended? since it doesn't work with Angular (maybe I'm doing something wrong).

It could be solved with changing the dialog content html from using the template object to using template.data instead. Or perhaps just check for the attribute data on the template object.

ngDialog module not found in IE11 and on Linux

Really strange one. It works great on Windows on Chrome and Firefox, but on IE11 and on a friend's Ubuntu box (on Chrome and Firefox) I get this error: -

Error: [$injector:unpr] http://errors.angularjs.org/1.3.0-beta.14/$injector/unpr?p0=ngDialogProvider%20%3C-%20ngDialog
at Anonymous function (http://onlineracingchampionship.com/scripts/angular.min.js:37:260)
at d (http://onlineracingchampionship.com/scripts/angular.min.js:35:276)
at Anonymous function (http://onlineracingchampionship.com/scripts/angular.min.js:37:332)
at d (http://onlineracingchampionship.com/scripts/angular.min.js:35:276)
at e (http://onlineracingchampionship.com/scripts/angular.min.js:36:29)
at instantiate (http://onlineracingchampionship.com/scripts/angular.min.js:36:221)
at Anonymous function (http://onlineracingchampionship.com/scripts/angular.min.js:69:249)
at Anonymous function (http://onlineracingchampionship.com/scripts/angular.min.js:55:64)
at q (http://onlineracingchampionship.com/scripts/angular.min.js:7:396)
at B (http://onlineracingchampionship.com/scripts/angular.min.js:54:435)

I have included ngDialog.min.js after angular.min.js: -

<script src="/scripts/angular.min.js" type="text/javascript"></script> <script src="/scripts/ngDialog.min.js" type="text/javascript"></script>

Any ideas what could be going wrong?

Thanks for your help
All the best,
Ash

ngDialog.opened is triggered before dialog is appended to the DOM

I am having a problem after upgrading from 1.7 to 2.2

ngDialog.opened event is triggered before my dialog is appended to the DOM.
Could that be caused by 6c8eab5 ?

Pass object using data property

I don't understand why data option is restricted to be a String? Why can't I pass arbitrary object?
My use-case:
I have list of items, each one with edit button. Modal window opens on button click and I want to pass item to this modal window.
I don't want to create additional controller for each item and I don't want to mess with JSON.stringify/JSON.parse.
Thank you.

Is there any way to disable body scroll when dialog is opened?

Is there any way to do this? Because overflow: hidden; is not working

ngDialog is taking time to show ng-bind values when open

We are using ngDialog on a page with +1000 table rows. When we open ngDialog on ng-click, it takes near about 1 sec. to populate and show ng-bind values from passed scope object. The dialog has a hello/wecome message with dynamic user name value ($scope.username) but it shows this message like 'hello , welcome to our website' and after 1 sec, message changes to 'hello testuser, wecome to our website'. Is there any way to wait dialog till the template compiled completely.

Preventing body from shifting when opening/closing popup.

When triggering the popup, when it gets shown, the body content shifts around 20px (i believe it's the scrollbar width equivalent). The same happens when closing. It also happened with bootstrap, but was fixed in version 3.2.0 of it.
Does anyone have a solution for this?
It's not a blocker but it really affects ui/ux appearence.

Thanks in advance.

Getting error while trying to close the dialog

Hi.
I'm trying to close dialog but get - Uncaught TypeError: Cannot read property '$destroy' of undefined - on line 91 of ngDialog.js
Can you help me to resolve this issue ?

ngAnimate 1.3.x issue with ngDialog duplicate calls.

Probably an outside issue due to ngAnimate v.1.3.0-rc.0 (I hear they're having a lot of issues with this release).

When you open the same dialog twice (with a form inside), angular throws an error cannot read property 'add' of undefined in ngAnimate module.

Does not seem to happen in Angular v1.2.x

Angular 1.3 support

• handle scopes on elements with debugInfoEnabled(false) - https://docs.angularjs.org/api/ng/provider/$compileProvider, also check - https://docs.angularjs.org/guide/production#disabling-debug-data
• ngAnimate issues (#77, #84)

templateCache trouble

Hi there,

in my scenario I have a login form open both as a dialog and as a full page as well. Both are using the same html template file. During some playing around I noticed that if I opened the dialog after I had visited the full page version, the dialog was not displayed (although background was filled). With some debugging I found out that although you are requesting the template from $templateCache service, you never actually put it there. After getting the template from $http I think you should store it, otherwise don't use $templateCache service at all since you are using the cached $http

ngDialog.open returns undefined

I'm trying to close an open dialog using it's id. To do this I'm using

myDialog = ngDialog.open(
                    {
                        template: '../../views/factcheckmodal.html',
                        className: 'ngdialog-theme-plain',
                        showClose: false,
                        scope: scope

                    }).$result;

then later

ngDialog.close(myDialog.attr('id'));

What I'm getting is
cannot read propertly $result of undefined

Please dd your library to some CDN

Is it possible to have this library with CDN url? :)

Could be awesome

Wait for images to load, and then show dialog? Is there a way to do that?

Hey there again.
I was wondering if there is any way that we can make dialog wait for all content (i.e., images) to load, before showing it.

Any tip on that?
Thanks in advance.

Example on using data field

Sorry if this one looks like a newbie suggestion. I am a newbie to AngularJS.
Your lib is great, but it is not clear how to work with data field.

IMO you should add to README.md that variable is accessible via ngDialogData. Or have an example in examples/

Background tabbing still works while dialog is up

Maybe I'm missing something, but if I open a dialog, I can still tab around in the background and interact with other elements; it so happens I have a view where there are multiple items, and each one of them can summon a dialog.

The real issue comes along when I tab around in the background and open up other dialogs - they start stacking up and the screen dimmer obviously gets darker and darker. I can work around this, but it'd be ideal if we could disable tabbing once a dialog crops up, or takes priority, so as to stack dialogs on top of each other and still only be able to interact with the topmost.

Any ideas?

Get wrong $body

Issue,
Can't open ngDialog after location.path redirect to other page.

Issue analysis:
In ngDialog.js version 0.2.0.
Line 30 var $body = $document.find('body');

$body is a static variable and remain the same in open function, It is not right in some situations.

Solution:
Replace var $body = $document.find('body');
by var getBody = function () {
return $document.find('body');
}
make sure $body is up to date in each time usage.

Shout out to Vex?

Hey @voronianski!

Hope this reaches you well.

I may be mistaken, but likeastore/ngDialog seems heavilly based on HubSpot/Vex. No doubt Vex is MIT License, but I was wondering if you wouldn’t mind giving a shout out to Vex in the README?

Thanks!

Make template caching optional

It would be nice to be able to disable template caching.

How to add print button and print only dialog-box?

How to add print button fox dialog-box?

Close button only works when closeByDocument enabled

It should be possible to use the close button without "click elsewhere to close" behavior enabled.

Defaults don't work for directive

Defaults set with ngDialogProvider are overwritten when I use ng-dialog directive.
This is because directive's link method does not check whether or not an attribute exists.

P.S.
thanks for this awesome plugin!

how do you use the data option?

I am trying to use the data option to pass some values to the modal template, but I'm not having any luck. Could you please advise the correct way to do this?

ngDialog.open({
                template: '/views/modals/template.html',
                scope: $scope,
                data : {"foo": "bar"}
            });

/views/modals/template.html:

<p>{{ngDialogData.foo}}</p>

results in:

<p class="ng-binding"></p>

is there way to fire event when button is clicked inside modal?

Maybe this directive should provide a 'width' options?

When i want to create different size dialog,i have to change the source code or do something other .

In your code ,you give the 'width' to 'ngdialog' in stylesheet 'ngDialog-theme-default.css'

I change the source code

var dialogWidth;
dialogWidth = options.width + "px" || "438px";
$dialog.html('<div class="ngdialog-overlay"></div><div class="ngdialog-content" style="width:'+dialogWidth+'">' + template + '</div>');

then i can use 'width' options to resolve this problem

Cannot install using bower

When I run bower install ngDialog I get the following error:

bower install ngDialog
bower ngDialog#*            not-cached https://github.com/likeastore/ngDialog.git#*
bower ngDialog#*               resolve https://github.com/likeastore/ngDialog.git#*
bower ngDialog#*              download https://github.com/likeastore/ngDialog/archive/0.1.2.tar.gz
bower ngDialog#*               extract archive.tar.gz
bower ngDialog#*              resolved https://github.com/likeastore/ngDialog.git#0.1.2
bower angular#~1            not-cached https://github.com/angular/bower-angular.git#~1
bower angular#~1               resolve https://github.com/angular/bower-angular.git#~1
bower angular#~1              download https://github.com/angular/bower-angular/archive/v1.2.11-build.2186+sha.766b3d5.tar.gz
bower angular#~1               extract archive.tar.gz
bower angular#~1              resolved https://github.com/angular/bower-angular.git#1.2.11-build.2186+sha.766b3d5
bower angular#>=1           not-cached https://github.com/angular/bower-angular.git#>=1
bower angular#>=1              resolve https://github.com/angular/bower-angular.git#>=1
bower angular#1.2.11-build.2186+sha.766b3d5       not-cached https://github.com/angular/bower-angular.git#1.2.11-build.2186+sha.766b3d5
bower angular#1.2.11-build.2186+sha.766b3d5          resolve https://github.com/angular/bower-angular.git#1.2.11-build.2186+sha.766b3d5
bower angular#>=1                                   download https://github.com/angular/bower-angular/archive/v1.2.11-build.2186+sha.766b3d5
.tar.gz
bower angular#1.2.11-build.2186+sha.766b3d5         download https://github.com/angular/bower-angular/archive/v1.2.11-build.2186+sha.766b3d5
.tar.gz
bower angular#1.2.11-build.2186+sha.766b3d5          extract archive.tar.gz
bower angular#>=1                                    extract archive.tar.gz
bower angular#>=1                                   resolved https://github.com/angular/bower-angular.git#1.2.11-build.2186+sha.766b3d5
bower angular#1.2.11-build.2186+sha.766b3d5            EPERM EPERM, unlink 'C:\**censored**\**censored**\AppData\Roaming\bower\cache\packages\060a9fe0e6
0a0d3d6c9ed350cde03e61\1.2.11-build.2186%2Bsha.766b3d5\angular.min.js'

Stack trace:
Error: EPERM, unlink 'C:\**censored**\**censored**\AppData\Roaming\bower\cache\packages\060a9fe0e60a0d3d6c9ed350cde03e61\1.2.11-build.2186%2Bsha.766b3d5
\angular.min.js'

Console trace:
Trace
    at StandardRenderer.error (C:\**censored**\**censored**\AppData\Roaming\npm\node_modules\bower\lib\renderers\StandardRenderer.js:74:17)
    at Logger.updateNotifier.packageName (C:\**censored**\**censored**\AppData\Roaming\npm\node_modules\bower\bin\bower:109:18)
    at Logger.EventEmitter.emit (events.js:95:17)
    at Logger.emit (C:\**censored**\**censored**\AppData\Roaming\npm\node_modules\bower\node_modules\bower-logger\lib\Logger.js:29:39)
    at C:\**censored**\**censored**\AppData\Roaming\npm\node_modules\bower\lib\commands\install.js:27:16
    at _rejected (C:\**censored**\**censored**\AppData\Roaming\npm\node_modules\bower\node_modules\q\q.js:808:24)
    at C:\**censored**\**censored**\AppData\Roaming\npm\node_modules\bower\node_modules\q\q.js:834:30
    at Promise.when (C:\**censored**\**censored**\AppData\Roaming\npm\node_modules\bower\node_modules\q\q.js:1079:31)
    at Promise.promise.promiseDispatch (C:\**censored**\**censored**\AppData\Roaming\npm\node_modules\bower\node_modules\q\q.js:752:41)
    at C:\**censored**\**censored**\AppData\Roaming\npm\node_modules\bower\node_modules\q\q.js:574:44

System info:
Bower version: 1.2.8
Node version: 0.10.22
OS: Windows_NT 6.1.7601 x64

No dialog is opened, content appears at the bottom of my page

I try a very simple example, and when I click the link that is supposed to launch my dialog, no dialog is opened and instead I get the template content at the bottom of my page.

markup:

<button ng-click="openFeedbackDialog()">Your Feedback</button>

script (in controller):

    $scope.openFeedbackDialog = function(){
            ngDialog.open({ template: 'firstDialogId' });
    };

template:

<script type="text/ng-template" id="firstDialogId">
   <h1>Template heading</h1>
    <p>Content goes here</p>
</script>

How to close all modals or the active one modal via custom button?

Hey, everything works here, but i got a problem, i can't understand how to make the active dialog or directly all dialogs to close on custom link or button click

I mean equivalent to this? :
onclick="close_dialogs()"

Any clue on how to do this ?

thanks for the ngDialog!

Change use "modal" class in content as it conflicts with bootstrap

The Angular UI - ui-bootstrap modal implementation isn't great, that why I'm using ngModal.
I have to manually override bootstrap css to avoid conflicting styles as the class "modal"is already defined by bootstrap.css

config dialog width and height

how to config dialog width and height through ng-dialog-class attribute ?

Passing data to dialog from another service

I've not been able to successfully pass data (by scope or data options) to a dialog being opened by my own service. Is this possible?

Package ngDialog as npm module

Certain infrastructure tools(like cdnjs) assume that libraries are packaged as npm modules. Can we package ndDialog as npm module?

See #19

scope.closeThisDialog should accept data argument

What I want to do is scope.closeThisDialog(dataPassedBackToCallee) and in callee controller myModal.closePromise.then(function(dataPassedBackToCallee) { /*work with data*/ })
Just like in http://angular-ui.github.io/bootstrap/ modal.
Use-case:
I opened a modal window to edit some item. In this modal window I have two buttons "Save changes" and "Cancel". Now in callee controller I want a way to understand if changes was saved or canceled.
Thank you.

Broadcasting?

It may be a helpful to add broadcasting to some events. For my current project I added this line at the bottom of the closeDialog function.

$rootScope.$broadcast('ngDialog.closed', $dialog);

Using KineticJS together with ngDialog

I want to use a KineticJS stage inside of the HTML Template.
It doesnt work because Kinetic is not able to find the id used in the stage ctor.
Any idea how to do this?
Thanks in advance

$scope variables not being updated by ngModel fields in $dialog when using scope: $scope

I use option scope:$scope. Functions on scope can be called but variables set by ngModel on modal do not get updated when using ngdialog.open. If I use ngDialog.openConfirm then the ngModel is working as expected. Am I doing something wrong or is this an issue?