Maison > interface Web > js tutoriel > Comment utiliser avec élégance le composant modal de ui.bootstrap dans angulaire.js

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

寻∝梦
Libérer: 2018-09-08 11:02:11
original
2002 Les gens l'ont consulté

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');
      };
    })
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion
$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());
      });
    };
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal