AngularJS-Modalbox-Vorlage ngDialog-Anwendungsfallfreigabe

Dieses Mal bringe ich Ihnen AngularJS Modal-Box-Vorlage ngDialog zum Teilen von Anwendungsfällen, was sind die Vorsichtsmaßnahmen bei der Verwendung der AngularJS-Modal-Box-Vorlage ngDialog, die folgenden sind praktische Fälle, einer Steh auf und schaut mal rein.

Zu Beginn des Projekts verwendeten wir das modale Feld $modal von AngularJS. Später stellten wir fest, dass das von $modal geöffnete Dialogfeld relativ zur Seite statisch ist ist eine lange Form wie diese. Die Erfahrung ist nicht sehr gut, und es gibt auch den Grund, warum $modal bei der Übergabe von $scope nicht sehr flexibel ist. Später bin ich zu $ngDialog gewechselt.

Die offizielle API ist hier:https://www.npmjs.com/package/ng-dialog

Stellen Sie zunächst sicher, dass Ihr Projekt die zugehörigen Dateien installiert hat, die von $ngDialog benötigt werden.

Die nächste einfache Demo

del.html-Inhalt ist wie folgt, der Inhalt Ihres Dialogfelds. Es ist hier relativ einfach, nur ein Bestätigungsdialogfeld

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

Fügen Sie Ihre Methode im Controller hinzu:

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

Die Vorlage hier ist ein Pfad. Wenn das Dialogfeld einfach ist, können Sie den

-Inhalt direkt in die Vorlage schreiben Sie müssen ein Attribut hinzufügen: plain:true,

Die Höhe und Breite des Dialogfelds können angepasst werden, width:500, //absolute Breite. Oder width:'%50' //Relative width

Für die beiden oben genannten Punkte, Beispiel:

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

Das obige Dokument ist nur ein einfaches Beispiel zum Öffnen nach ID. Ein Bestätigungsdialogfeld und andere zugehörige Details.

Es gibt auch einen sehr detaillierten Artikel, der $ngDialog vorstellt, der im Grunde die offizielle API übersetzt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Installation und Verwendung von Node.js Express

Schritte zur Verwendung von Node.js Express Front-End-Entwicklungsvorlagen-Engine Jade Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonAngularJS-Modalbox-Vorlage ngDialog-Anwendungsfallfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!