Cette fois, je vous présente AngularJS modèle de boîte modale ngDialog partage de cas d'utilisation, quelles sont les précautions lors de l'utilisation du modèle de boîte modale AngularJS ngDialog, voici des cas pratiques, un Levez-vous et jetez un oeil.
Au début du projet, la boîte de dialogue que nous avons utilisée était la boîte modale $modal d'AngularJS, mais plus tard nous avons constaté que la boîte de dialogue ouverte par $modal est statique par rapport à la page. est une forme longue, comme celle-ci. L'expérience n'a pas été très bonne et le transfert de $scope depuis $modal n'a pas été très flexible. Plus tard, je suis passé à $ngDialog.
L'API officielle est ici : https://www.npmjs.com/package/ng-dialog
Assurez-vous d'abord que votre projet a installé lesfichiers associés requis par $ngDialog.
La prochaine démo simplele contenu du fichier del.html est le suivant, qui est le contenu de votre boîte de dialogue. C'est relativement simple ici, juste une boîte de dialogue de confirmation.<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>
$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(); }; } }); };
mais vous devez ajouter un attribut : plain :true,
La hauteur et la largeur de la boîte de dialogue peuvent être personnalisées, width:500,//Largeur absolue. Ou width :'%50' //Largeur relative Pour les deux points ci-dessus, exemple :$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(); }; } }); };
Explication détaillée des étapes pour installer et utiliser Node.js Express
Étapes pour utiliser Node. moteur de modèles de développement front-end Jade Explication détaillée
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!