资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

ngModal模态框如何在AngularJS中使用

本篇文章给大家分享的是有关ngModal模态框如何在AngularJS中使用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

我们提供的服务有：成都做网站、网站建设、微信公众号开发、网站优化、网站认证、涡阳ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的涡阳网站制作公司

在AngularJS中使用模态框需要引用的文件：

  1. angular.js 1.5.5

  2. ui.bootstrap-tpls.js 0.11.2

  3. bootstrap.css 3.3.7

需要注意版本要一致，高版本的不支持这种方法，会出错

将需要弹出的模态框的内容写在 script 标签中，指明属性，放在页面中

 


  
    
      标题信息
    
  

  
    
      模态框内容
    
  
              确认                 退出        

在App和Controller中注入模态框

var app = angular.module('app', ['ui.bootstrap']);
app.controller('modalController', function($scope, $rootScope,$modal) {
  $scope.openModel = function() {
      var modalInstance = $modal.open({
        templateUrl : 'modal.html',//script标签中定义的id
        controller : 'modalCtrl',//modal对应的Controller
        resolve : {
          data : function() {//data作为modal的controller传入的参数
             return data;//用于传递数据
          }
        }
      })
    }
}

//模态框对应的Controller
app.controller('modalCtrl', function($scope, $modalInstance, data) {
  $scope.data= data;

  //在这里处理要进行的操作  
  $scope.ok = function() {
    $modalInstance.close();
  };
  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  }
});

添加事件触发显示模态框

打开模态框

html




  ng-model模态框



打开模态框

 
  

    
      
        标题信息
      
    

    
      
        模态框内容 

        {{data}}
      
    
    
      
        确认
      
      
        退出
      
    
  






  var app = angular.module('app', ['ui.bootstrap']);
  app.controller('modalController', function($scope, $rootScope, $modal) {
    var data = "通过modal传递的数据";
    $scope.openModal = function() {
        var modalInstance = $modal.open({
          templateUrl : 'modal.html',//script标签中定义的id
          controller : 'modalCtrl',//modal对应的Controller
          resolve : {
            data : function() {//data作为modal的controller传入的参数
               return data;//用于传递数据
            }
          }
        })
      }
  })
   //模态框对应的Controller
   app.controller('modalCtrl', function($scope, $modalInstance, data) {
     $scope.data= data;

     //在这里处理要进行的操作
     $scope.ok = function() {
       $modalInstance.close();
     };
     $scope.cancel = function() {
       $modalInstance.dismiss('cancel');
     }
  });

以上就是ngModal模态框如何在AngularJS中使用，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


标题名称：ngModal模态框如何在AngularJS中使用
当前路径：http://www.cdkjz.cn/article/ijdcjj.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
四川雕琢时光成都小程序定制开发公司成都画册制作成都网站制作精灵网简阳服务器托管盐亭网站设计盐亭网站建设网站制作德阳定制网站建设

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图