Modèle de boîte modale AngularJS Partage de cas d'utilisation ngDialog-js tutoriel-php.cn

Modèle de boîte modale AngularJS Partage de cas d'utilisation ngDialog

php中世界最好的语言

Libérer： 2018-05-22 11:03:38

original

1900 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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 :

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!