AngularJS$弹出模态实例代码

接下来，让我们告诉您$模态有一个方法：打开，方法的属性：

TemplateUrl：弹出窗口的地址



模板：用于显示HTML标记



适用范围：用于模态内容域的使用（事实上，$模态将创建一个子域的当前默认rootscope美元范围）



控制器：控制器指定模态初始化美元美元范围，可注射modalinstance美元



解决：定义一个成员，通过美元的模态指定控制器，这相当于一个解决路径属性。如果我们需要一个目标对象的转移，我们需要使用angular.copy（）。



背景：控制背景，允许值为真（默认），false（没有背景），静态背景存在，但当单击模态窗口时，模态窗口不关闭。



键盘：当按下ESC键时，模态对话框关闭，默认为真。



WindowClass：指定一个类并添加到模态窗口



open方法返回一个具有以下属性的实例：

关闭（结果）：关闭模式窗口并传递结果



解雇（原因）：撤销模态法和通过的原因



结果：模式窗口关闭或撤销时所通过的合同。



打开的：一个契约，当模式窗口打开并加载内容时传递的变量。



此外，modalinstance美元延伸的两种方法，密切的（结果），美元美元和解雇（原因），这是很容易关闭窗口，不需要额外的控制器















我是个情态动词！



<
ng点击=selected.item =项目> { {项目} }

选择：选定项目}车削


好啊
取消


打开我！


无功modaldemo = angular.module（'modaldemo，{ 'ui。引导}）；
无功modaldemoctrl =函数（美元美元美元范围，模态，日志）{
scope.items美元= { 'item1 '，'item2 '，'item3}；
scope.open美元=函数（）{
无功modalinstance = modal.open美元（{
TemplateUrl：'mymodalcontent HTML，
控制器：ModalInstanceCtrl，
解决：{
项目：函数（）{
返回的scope.items；
}
}
}）；
ModalInstance.opened.then（功能）（{ / /模态窗口打开后实现的功能
console.log（'modal是打开的）；
}）；
ModalInstance.result.then（功能（结果）{）
console.log（结果）；
}函数（原因）{
console.log（原因）； / /单击空白区域，将输出的背景
单击取消，将取消取消
log.info美元（'modal驳回：+新的日期（））；
}）；
}；
}；
无功modalinstancectrl =函数（美元范围，modalinstance美元，项目）{
scope.items美元=项目；
scope.selected美元= { {
项目：$范围。项目{ 0 }
}；
scope.ok美元=函数（）{
modalinstance.close美元（美元范围。选择）；
}；
scope.cancel美元=函数（）{
modalinstance.dismiss美元（'cancel）；
}；
}；





以上是AngularJS模态弹出框美元Xiaobi给出的示例代码，希望对大家有帮助。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。