angularjsng-dialog

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


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!


Solution

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