介绍 <李> & lt; script 类型=拔谋?ng-template", id=癿odal.html"祝辞,
& lt; div>
& lt;才能div 类=癿odal-header"比;
,,,& lt; h4 类=癿odal-title",对齐=癱enter"比;
,,,,,标题信息
,,,& lt;/h4>
& lt;才能/div>
& lt;才能div 类=癿odal-body"比;
,,,& lt; div 对齐=癱enter"比;
,,,,,模态框内容
,,,& lt;/div>
& lt;才能/div>
& lt;才能div 类=癿odal-footer"比;
,,,& lt; button 类=癰tn btn-primary", ng-click=昂?)“比;
,,,,,确认
,,,& lt;/button>
,,,& lt; button 类=癰tn btn-warning", ng-click=叭∠?)“比;
,,,,,退出
,,,& lt;/button>
& lt;才能/div>
& lt;/div>
& lt;/script> var app =, angular.module(& # 39;应用# 39;,,(& # 39;ui.bootstrap& # 39;]);
app.controller (& # 39; modalController& # 39;,,函数(范围、美元,rootScope美元,美元模态),{
时间=美元才能scope.openModel 函数(),{
,,,,,var modalInstance =, $ modal.open ({
,,,,,,,templateUrl :, & # 39; modal.html& # 39;//脚本标签中定义的id
,,,,,,,controller :, & # 39; modalCtrl& # 39;//模态对应的控制器
,,,,,,,resolve :, {
,,,,,,,,,data :,()函数,{//数据作为模态的控制器传入的参数
,,,,,,,,,,,,return 数据;//用于传递数据
,,,,,,,,,}
,,,,,,,}
,,,,,})
,,,}
}//模态框对应的控制器
app.controller (& # 39; modalCtrl& # 39;,,函数(范围、美元,modalInstance美元,数据),{
美元才能scope.data=https://www.yisu.com/zixun/数据;//在这里处理要进行的操作
美元的范围。好的=function () {
美元modalInstance.close ();
}；
美元的范围。取消=function () {
美元modalInstance.dismiss('取消');
}
}); & lt; button ng-click=皁penModal()“在打开模态框& lt;/button> & lt; ! DOCTYPE html>
& lt; html ng-app=癮pp", ng-controller=癿odalController"比;
& lt; head>
& lt;才能title> ng-model模态框& lt;/title>
& lt;/head>
https://www.yisu.com/zixun/& lt; link href=" https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css " rel=巴獠縩ofollow”rel="样式表">
身体<>
<按钮ng-click=" openModal() ">打开模态框>
本篇文章给大家分享的是有关ngModal模态框如何在AngularJS中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
在AngularJS中使用模态框需要引用的文件:
角。李js 1.5.5
<李>ui.bootstrap-tpls。李js 0.11.2
<李>引导。李css 3.3.7
需要注意版本要一致,高版本的不支持这种方法,会出错
将需要弹出的模态框的内容写在脚本标签中,指明属性,放在页面中
在应用程序和控制器中注入模态框
添加事件触发显示模态框
html
对齐
标题信息
模态框内容
{{数据}}
{{数据}}
