ngDialog - how to close dialog from the template (i.e. no controller functions)?

Question

On ngDialog (https://github.com/likeastore/ngDialog), is there a built in way to close a dialog from within the template it self? I.e. so I don't need any functions in the controller calling the dialog?

This is my template (errorPopup.html):

<div>
  <div class="alert alert-warning">
    <div class="errorLogo"><i class="icon-exclaim"></i></div>
    <div class="errorContent" data-ng-bind-html="errorMessage"></div>
  </div>
  <div class="buttonWrapper">
    <button type="button" class="btn-primary pull-right">
      <span res="close"></span>
    </button>
  </div>
</div>

And this is how I open the dialog:

function showErrorPopup() {
  ngDialog.open({
    template: 'errorPopup.html',
    scope: $scope,
    className: 'ngdialog-theme-default ngdialog-cart-theme',
    showClose: true,
    appendTo: 'div[ui-view]',
    closeByDocument: false
  });
}

So when I call showErrorPopup() I get a dialog displayed, however, I need to make this "close" button to actually dismiss/close the popup. As of now, this is just a plan button that doesn't do anything.

Is there something I can do a the template level (without changing my controller's code) to make the button work?

Maybe I should be using a default button instead of my own? If so, how?

PS: I notice thats clicking on the X button on the top right works, the popup is dismissed.

Thanks all!

It closes the window, but doesn't feel right. What would feel right then? — Alon Eitan, Jun 02 '16 at 13:05
@AlonEitan I've rephrased my question, all I'm trying to do is figure out how do I close the dialog from within the template (without a function in the controller) — Wagner Danda da Silva Filho, Jun 02 '16 at 13:24
so just do `$scope.ngDialog = ngDialog;` in the controller, and in the view `ng-click="ngDialog.close()"` — Alon Eitan, Jun 02 '16 at 13:25
@AlonEitan thats a pretty good idea actually! Might want to post it as an asnwer :D — Wagner Danda da Silva Filho, Jun 02 '16 at 13:55
Thanks for the confirmation. I have posted my comment as an answer — Alon Eitan, Jun 02 '16 at 13:57

score 8 · Answer 1 · answered Dec 27 '16 at 13:13

8

You don`t have to inject ngDialog module in your $scope. You can call closeThisDialog() function in your popup template directly:

<button ng-click="closeThisDialog(0)">Close</button>

function argument is the value to resolve popup with.

answered Dec 27 '16 at 13:13

Mateusz Paulski

491
5
5

score 4 · Accepted Answer · answered Jun 02 '16 at 13:57

If you want to call the close function of the ngDialog directly from the view, you must inject the module itself to the scope inside the controller, in order for it to become available from the view:

$scope.ngDialog = ngDialog;

Then, you can use it directly from within the view:

<button ng-click="ngDialog.close()">Close</button>

score 0 · Answer 3 · answered Jun 02 '16 at 13:10

It is hard to say what exactly you are doing wrong, until you paste some controller and app.js and HTML code contents. Yes, ngDialog has built-in way of closing the dialog

Make Sure you set the className to 'ngdialog-theme-flat ngdialog-theme-custom' or other css class as described in the docs inside open function.

score 0 · Answer 4 · answered Jun 02 '16 at 13:15

0

You have added handler with name "closeThisDialog" , but function has another name "closePopup".

Maybe it is your issue.

answered Jun 02 '16 at 13:15

Coffee-Tea

1,139
9
10

Thx but you probably just got confused with my question. I've rephrased it to avoid this exact mix up :D – Wagner Danda da Silva Filho Jun 02 '16 at 13:39

upendra allu · Answer 5 · 2016-06-02T13:25:46.163

0

just follow these steps 1.when creating app

var app = angular.module('sampleApp', ['ngDialog']);
2.use button like this

<button ng-click="clickMe()">Click to Open</button>

3.put this in your controller

 `$scope.clickMe = function () {
    ngDialog.open();
};`

by default it has code to close,It'll close automatically when you click on close. Hope it'll be useful

edited Jun 02 '16 at 13:25

answered Jun 02 '16 at 13:21

upendra allu

106
1
6

Thats exactly what I'm trying to avoid. The problem I have is that I reuse the template on multiple pages and that would mean I'd have to have this clickMe function on every sone one of my controllers... – Wagner Danda da Silva Filho Jun 02 '16 at 13:38

ngDialog - how to close dialog from the template (i.e. no controller functions)?

5 Answers5