AngularJS modal box template ngDialog use case sharing

This time I will bring you AngularJS modal box template ngDialog use case sharing, what are the precautions when using AngularJS modal box template ngDialog, the following is a practical case, one Get up and take a look.

When the project started, the dialog box we used was the $modal modal box of AngularJS, but later we found that the dialog box opened by $modal was static relative to the page. If the dialog box is a long form, like this The experience is not very good, and the $modal transfer to $scope is not very flexible. Later, I switched to $ngDialog.

The official API is here:https://www.npmjs.com/package/ng-dialog

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

The next simple demo

del.html 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"> 
<p class="modal-header"> 
 <h4 class="modal-title">删除</h4> 
</p> 
<p class="modal-body"> 
 <form autocomplete="off" class="file-brief file-brief-show form-validation" name="ObsForm" id="form-new-style"> 
  <p class="col-sm-12 m-t-xs m-b-xs "> 
   <p class="form-group"> 
    <label>您确认要删除吗?</label> 
   </p> 
  </p> 
 </form> 
</p> 
<p class="modal-footer"> 
 <button type="submit" class="btn" ng-click="confirm()" >确定</button> 
 <button type="button" class="btn" ng-click="cancel()">取消</button> 
</p>

In your Add your method in the Controller:

$scope.del = function () { 
   ngDialog.open({ 
    template: '/del.html', 
    className: 'ngdialog-theme-default', 
    scope: $scope, 
    controller: function ($scope) { 
    ... 
     $scope.confirm = function () { 
     ... 
     }; 
     $scope.cancel = function () { 
      $scope.closeThisDialog(); 
     }; 
    } 
   }); 
};

The template here is a path. In fact, if the dialog box is simple, you can directly write the

content in the template. You just need to add an attribute: plain:true,

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

For the above two points, example:

$scope.delBucket = function () { 
   ngDialog.open({ 
    template: '<p class="modal-header"><h4 class="modal-title">删除Bucket</h4></p>' + 
    '<p class="modal-footer"><button type="submit" class="btn" ng-click="confirm()" >确定</button>'+ 
       '<button type="button" class="btn" ng-click="cancel()">取消</button></p>', 
  plain:true, 
    className: 'ngdialog-theme-default', 
  width:600, 
    scope: $scope, 
    controller: function ($scope) { 
    ... 
     $scope.confirm = function () { 
     ... 
     }; 
     $scope.cancel = function () { 
      $scope.closeThisDialog(); 
     }; 
    } 
   }); 
  };

The above is just a simple example. The official document also has a dialog box that opens by id. Confirmation dialog box and other related details.

There is also a very detailed article introducing $ngDialog, which basically translates the official API.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to install and use Node.js Express

Node front-end development template engine Jade usage steps Detailed explanation

The above is the detailed content of AngularJS modal box template ngDialog use case sharing. For more information, please follow other related articles on the PHP Chinese website!