Maison >interface Web >js tutoriel >Exemple de partage de code sur la boîte modale angulaireJS $modal

Exemple de partage de code sur la boîte modale angulaireJS $modal

黄舟
黄舟original
2017-05-27 10:29:321614parcourir

Cet article présente principalement l'exemple de code $modal de la boîte modale angularJS L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner en guise de modèle. référence. Suivons l'éditeur et jetons un coup d'œil

1 Présentons le module $modal

tel que :

angular.
module
('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]);

<.>2 .Exécuter la fonction de boîte modale

$scope.editModule = function(type, size, id) { 
  $scope.id = id; 
  var modalInstance = $modal.open({ 
    templateUrl: &#39;tpl/weichat_modulebaseinfo.html&#39;, //template:&#39;html元素模板&#39;, 
    controller: &#39;EditModuleCtrl&#39;, // 初始化模态范围 
    size: size, //大小配置 
    scope: &#39;一个作用域为模态的内容使用($modal会创建一个当前作用域的子作用域,scope可有可无)默认为$rootScope&#39;, 
    resolve: { 
      items: function() { 
        return $scope.id; //向模态框控制器中传值 
      } 
    } 
    background: &#39;&#39;, //控制背景,true(有) or false(无),static背景存在,但是点击模态窗口之外,模态窗不关闭 
    keyboard: &#39;&#39;, //按下Esc时,模态对话框是否关闭,默认为ture 
    windowClass: &#39;&#39; //指定一个class并被添加到模态窗口中 
 
  }); 
 
  modalInstance.result.then(function(selectedItem) { //模态框关闭后返回函数,selectedItem为返回值 
 
  }) 
}

3. Créer un contrôleur de boîte modale

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!

Déclaration:
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