Angular ngDialog：setDefaults的问题

Question

I'm using ngDialog which works completly fine without adding any setDefault properties, once in the app.config if I set any properties, it does not render.

I want to prevent dialog box from closing on click of esc or anywhere other than the dialog box.

ngDialog.open({
    template: 'app/components/pages/page-locations/compare-location.html',
    className: 'ngdialog-theme-plain', 
    scope: $scope
});

This was working completely fine until I added the below code:

var app = angular.module('myApp', ['ngDialog']);
app.config(['ngDialogProvider', function (ngDialogProvider) {
    ngDialogProvider.setDefaults({
        className: 'ngdialog-theme-plain',
        plain: true,
        showClose: false,
        closeByDocument: false,
        closeByEscape: false
    });
}]);

I got the above code from the documentation, and I changed the className . At the moment it renders as a link instead of modal content.

<div class="ngdialog-content" role="document">
    app/components/pages/page-locations/compare-location.html
</div>

Answer 1

I guess the issue relies here

// you're calling html file rather than dialog id
template: 'app/components/pages/page-locations/compare-location.html'

You should define dialog id in your view

// Example modal template
<script type="text/ng-template" id="modalDialogId">
        <div class="ngdialog-message">
            <h3>ngDialog modal example</h3>
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(confirmValue)">Confirm</button>
            <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">Cancel</button>
        </div>
    </script>

and call it in the template like this

 ngDialog.open({
   template: 'modalDialogId',
   className: 'ngdialog-theme-plain', 
   scope: $scope
 });

Answer 2

The solution what I found out was :

ngDialog.open({ 
    template: 'app/components/pages/page-locations/info-compare.html',
    className: 'ngdialog-theme-plain', 
    scope: $scope, 
    closeByDocument: false, 
    closeByEscape: false
});

Since I have too many dialog boxes which has a large amount of code, I did not want to add as a script in my view.