So nutzen Sie elegant die modale Komponente von ui.bootstrap in angle.js

Die modale Komponente von ui.bootstrap in anglejs kann die Kommunikation zwischen dem Seitencontroller und dem Modalbox-Controller problemlos realisieren, insbesondere das Popup-Modalfeld enthält komplexere Tabelleninformationen, die der Benutzer ausfüllen muss Kommen wir zum Thema:

Registrieren Sie den Controller der globalen Modal-Box-Instanz

angular.module('myApp.Controllers', [
        'ui.bootstrap'
])
.controller('appModalInstanceCtrl', function ($scope,$uibModalInstance,modalDatas) {
      var $ctrl = this;
      $scope.modalDatas = modalDatas; //双向绑定，方便在确认中回传可能修改的字段
     
      // $ctrl.insta
      $ctrl.ok = function (val) {
        $scope.modalDatas.result = val;
        $uibModalInstance.close(
          $scope.modalDatas  //在模态框View中修改的值传递回去，view中可以直接添加属性
        );
      };
      
      $ctrl.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };
    })

Erstellen Sie eine neue Vorlagendatei src/templates/modalViews/ bestätigen.html

<p class="modal-header">
    <h3 class="modal-title">标题</h3>
</p>

<p class="modal-body">
    <p class="content">
      <label class="label">确认信息：</label>
      <input type="text"  ng-model="modalDatas.msg">
    </p>
    <p class="content">
      <label class="label">备注信息：</label>
      <input type="text"  ng-model="modalDatas.content">
    </p>
    
</p>

<p class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">确定</button>
    <button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">取消</button>
</p>

Seiten-Trigger-Code:

<button type=&#39;button&#39; class=&#39;btn btn-primary&#39; ng-click="openModal(&#39;md&#39;, &#39;confirm&#39;)">打开'confirm' modal</button>

Registrieren Sie die openModal-Funktion im Controller, der den Seiten-Trigger-Code verwaltet

Ui verwenden Die von .bootstrap bereitgestellten Dienste $uibModal werden zum Erstellen modaler Boxen verwendet. Sie müssen lediglich die modale Boxansicht und den Controller konfigurieren. $uibModalBietet die einzige Möglichkeit zum Konfigurieren von open(options). (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website AngularJS Development Manual , um mehr zu erfahren)

optionsParameter:
animation ( Typ: boolean, Standard: true) Animationssteuerung zum Öffnen/Schließen der modalen Box
appendTo (Typ: angle.element, Standard: body) Gibt die Position an, an der der modale Boxcode eingefügt wird body
backdrop (Typ: boolean|string, Standard: true) Anzeigesteuerung der Maskenebene
backdropClass (Typ: string) Zusätzliche Klasse zur Maskenebene hinzufügen
bindToController (Typ: boolean , Standard: false) – wenn controllerAs verwendet wird (z. B. auf $ctrl gesetzt) ​​und wenn dieses Attribut auf true gesetzt ist, können Sie $scope an den Controller binden. Die Idee ist, dass $scope der Bereich ist, der verwaltet werden kann Wenn die Modalbox in den Body eingefügt wird, wird der Controller, der das Body-Tag verwaltet, an $ctrl gebunden. Daher ist es am besten, es zusammen mit appendTo zu verwenden.
component (Typ: string, Beispiel: myComponent) Verwenden Sie die Modalbox als Komponente
controller (Typ: function|string|array, Beispiel: MyModalController) Geben Sie den Modalbox-Controller an
controllerAs (Typ: Zeichenfolge, Beispiel: Strg) Controller-Alias ​​
resolve (Typ: Objekt) – Übergeben Sie Daten an die modale Box
templateUrl (Typ: Zeichenfolge) Geben Sie die Vorlage für die modale Box-Ansichtsebene an
size (Typ: string, Beispiel: lg) Geben Sie die modale Boxgröße an

<strong>还有很多属性，可以到官网查询，比如控制多层模态框等等。</strong>

Okay, dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie zur chinesischen PHP-WebsiteAngularJS-Benutzer Handbuch zum Lernen), wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

Das obige ist der detaillierte Inhalt vonSo nutzen Sie elegant die modale Komponente von ui.bootstrap in angle.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!