SoFunction
Updated on 2025-04-08

Detailed explanation of the use of AngularJS modal box template ngDialog

At the beginning of the project, the dialog box we used was AngularJS's $modal modal box, but later I found that the dialog box opened by $modal is stationary relative to the page. If the dialog box is a very long form, the experience will not be very good. There is also the reason why $modal is not very flexible to pass $scope, so I later switched to $ngDialog.

The official API is here:/package/ng-dialog

First make sure that your project has installed the relevant files required by $ngDialog.

Next is a simple demo

The content is as follows, which is the content of your dialog box. It is relatively simple here, just a confirmation dialog box

<meta charset="UTF-8"> 
<div class="modal-header"> 
 <h4 class="modal-title">delete</h4> 
</div> 
 
<div class="modal-body"> 
 <form autocomplete="off" class="file-brief file-brief-show form-validation" name="ObsForm" > 
  <div class="col-sm-12 m-t-xs m-b-xs "> 
   <div class="form-group"> 
    <label>您确认要delete吗?</label> 
   </div> 
  </div> 
 </form> 
</div> 
<div class="modal-footer"> 
 <button type="submit" class="btn" ng-click="confirm()" >Sure</button> 
 <button type="button" class="btn" ng-click="cancel()">Cancel</button> 
</div>

Add your method to your controller:

$ = function () { 
   ({ 
    template: '/', 
    className: 'ngdialog-theme-default', 
    scope: $scope, 
    controller: function ($scope) { 
    ... 
     $ = function () { 
     ... 
     }; 
     $ = function () { 
      $(); 
     }; 
    } 
   }); 
};

Here is a path in the template. In fact, if the dialog box is simple, you can directly write <div> content in the template, just add a property: plain:true,

The height width of the dialog box can be customized, width:500,//absolute width. Or width:'%50' //Relative width

For the above two points, examples:

$ = function () { 
   ({ 
    template: '&lt;div class="modal-header"&gt;&lt;h4 class="modal-title"&gt;deleteBucket&lt;/h4&gt;&lt;/div&gt;' + 
    '&lt;div class="modal-footer"&gt;&lt;button type="submit" class="btn" ng-click="confirm()" &gt;Sure&lt;/button&gt;'+ 
       '&lt;button type="button" class="btn" ng-click="cancel()"&gt;Cancel&lt;/button&gt;&lt;/div&gt;', 
  plain:true, 
    className: 'ngdialog-theme-default', 
  width:600, 
    scope: $scope, 
    controller: function ($scope) { 
    ... 
     $ = function () { 
     ... 
     }; 
     $ = function () { 
      $(); 
     }; 
    } 
   }); 
  };

The above is just a simple example. There are detailed introductions in the official document, such as opening a dialog box through id, opening a confirmation dialog box, etc.

There is also an article that introduces $ngDialog in detail, which basically translates the official API.

Attached the article linkhttps:///article/

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.