Comment utiliser le modèle de boîte modale AngularJS ngDialog

Cette fois, je vais vous montrer comment utiliser le modèle de boîte modale AngularJS ngDialog, et quelles sont les précautions pour utiliser le modèle de boîte modale AngularJS ngDialog Ce qui suit est un exemple pratique. Dans ce cas, jetons un coup d'œil ensemble. Jetez un œil.

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'est pas très bonne, et il y a aussi la raison pour laquelle $modal n'est pas très flexible lors du passage de $scope 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é les fichiers associés requis par $ngDialog.

La prochaine démo simple

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

Ajoutez votre méthode à votre 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(); 
     }; 
    } 
   }); 
};

Ici le modèle est un chemin En fait, si la boîte de dialogue est simple, vous pouvez directement écrire le contenu

ajoutez simplement 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(); 
     }; 
    } 
   }); 
  };

Ce ci-dessus n'est qu'un exemple simple, le document officiel a également une boîte de dialogue qui s'ouvre par id , ouvrant une boîte de dialogue de confirmation et d'autres détails associés.

Il existe également un article très détaillé présentant $ngDialog, qui traduit essentiellement l'API officielle.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment faire fonctionner Node.js à l'aide de la boîte de dialogue ngDialog

Comment faire fonctionner Angular à l'aide du chargement dynamique méthode de composant Implémenter la boîte de dialogue

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!