Comment utiliser avec élégance le composant modal de ui.bootstrap dans angulaire.js

Le composant modal de ui.bootstrap dans angulairejs peut facilement réaliser la communication entre le contrôleur de page et le contrôleur de boîte modale, en particulier la boîte modale contextuelle contient des informations de table plus complexes dont l'utilisateur a besoin. entrez et accédez au sujet :

Enregistrez le contrôleur de l'instance de boîte modale globale

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

Créez un nouveau fichier modèle src/templates/modalViews /confirm.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>

Code déclencheur de page :

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

Enregistrer la fonction openModal dans le contrôleur du déclencheur de page de gestion code

Utilisez les services fournis par ui.bootstrap$uibModal pour créer une boîte modale Il vous suffit de configurer simplement la vue de la boîte modale et le contrôleur. $uibModalFournit le seul moyen de configurer open(options). (Si vous souhaitez en savoir plus, rendez-vous sur le site PHP chinois Manuel de développement AngularJS pour apprendre)

optionsParamètres :
animation ( Type : booléen, Par défaut : vrai) Contrôle d'animation d'ouverture/fermeture de la boîte modale
appendTo (Type : angulaire.element, Par défaut : body) Spécifie la position dans laquelle le code de la boîte modale est inséré par défaut. body
backdrop (Type : boolean|string, Par défaut : true) Contrôle d'affichage du calque de masque
backdropClass (Type : string) Ajouter une classe supplémentaire au calque de masque
bindToController (Type : boolean , Par défaut : false) - lorsqu'il est utilisé controllerAs (par exemple, défini sur $ctrl) et lorsque cet attribut est défini sur true, vous pouvez lier $scope au contrôleur. L'idée est que $scope est la portée qui peut gérer. la boîte modale, c'est-à-dire que si la boîte modale est insérée dans le corps, alors le contrôleur qui gère la balise body sera lié à $ctrl, il est donc préférable de l'utiliser avec appendTo.
component (Type : string, Exemple : myComponent) Utiliser la boîte modale comme composant
controller (Type : function|string|array, Exemple : MyModalController) Spécifiez le contrôleur de la boîte modale
controllerAs (Type : chaîne, Exemple : ctrl) Alias ​​du contrôleur
resolve (Type : Objet) - Transmettre les données à la boîte modale
templateUrl (Type : chaîne) Spécifiez le modèle de couche de vue de la boîte modale
size (Type : string, Exemple : lg) Spécifiez la taille de la boîte modale

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

$scope.openModel = function (size, type) {
      //type即view文件名，在同一个页面有多个不同业务的模态框的情况下很方便
      var tplUrl = './src/templates/modalViews/' + type + '.html';
      $scope.modalDatas = {
          msg: 'Hello World!'
      };

      var modalInstance = $uibModal.open({
        animation: true,
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: tplUrl,
        controller: 'appModalInstanceCtrl',
        controllerAs: '$ctrl',
        size: size,
        resolve: {
          modalDatas: function () {
            return $scope.modalDatas;
          }
        }
      });
      modalInstance.result.then(function (datas) {
        // 点击确认按钮执行的代码
        //可以从datas中获取msg和content字段
        //进一步操作：发起http请求等       
      }, function () {
        // 点击取消按钮执行的代码
        console.info('Modal dismissed at: ' + new Date());
      });
    };

D'accord, cet article se termine ici (si vous voulez en voir plus, accédez simplement au PHP chinois site Web Manuel d'utilisation d'AngularJS pour apprendre). Si vous avez des questions, vous pouvez laisser un message ci-dessous.

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!