So verwenden Sie die modale AngularJS-Boxvorlage ngDialog

Dieses Mal zeige ich Ihnen, wie Sie die AngularJS Modal-Box-Vorlage ngDialog verwenden und welche Vorsichtsmaßnahmen für die Verwendung der AngularJS-Modal-Box-Vorlage ngDialog gelten Fall, lasst uns gemeinsam einen Blick darauf werfen. 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:

So bedienen Sie Node.js mit dem Dialogfeld ngDialog

So bedienen Sie Angular mit dynamischem Laden Komponentenmethode Implement Dialog

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die modale AngularJS-Boxvorlage ngDialog. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!