项目开始的时候我们用的对话框是AngularJS美元的模态模态框,但是后来发现模态美元打开的对话框是相对页面静止的,如果对话框是一个很长的表单,这样体验度就不是很好了,还有模态传范围不美元是很灵活的原因,后来就改用的ngDialog美元。
官方的API在这里:https://www.npmjs.com/package/ng-dialog
首先确定你的项目已经安装了美元ngDialog需要的相关文件。
接下来一个简单的演示
del.html内容如下,就是你的对话框内容,这里比较简单,只是一个确认对话框
& lt;元charset=皍tf - 8”比;
& lt; div类=癿odal-header”比;
& lt; h5类=" modal-title "祝辞删除& lt;/h5>
& lt;/div>
& lt; div类=癿odal-body”比;
& lt;形式自动完成=肮乇铡眂lass=癴ile-brief file-brief-show表单验证“name=" ObsForm " id=癴orm-new-style”比;
& lt; div class=" col-sm-12 m-t-xs m-b-xs”比;
祝辞& lt; div class="形式的班级”;
& lt; label>您确认要删除吗& # 63;& lt;/label>
& lt;/div>
& lt;/div>
& lt;/form>
& lt;/div>
& lt; div类=癿odal-footer”比;
& lt;按钮类型=疤峤弧崩?癰tn ng-click”=叭啡?)”祝辞确定& lt;/button>
& lt;按钮类型=鞍磁ァ崩?癰tn ng-click”=叭∠?)在取消& lt;/button>
& lt;/div>之前
在你的控制器里添加你的方法:
$ scope.del=function () {
ngDialog.open ({
模板:“/del.html”,
名称:“ngdialog-theme-default”,
范围:美元的范围,
控制器:函数(范围){
…
美元的范围。确认=function () {
…
};
美元的范围。取消=function () {
美元scope.closeThisDialog ();
};
}
});
};
之前
这里模板里是一个路径,其实如果对话框简单的话可以在模板里直接写& lt; div>内容,只是要加一个属性:平原:真的,
对话框的高度宽度都可以自定义,宽度:500//绝对宽度。或者宽度:% 50的//相对宽度
针对以上两点,示例:
$ scope.delBucket=function () {
ngDialog.open ({
模板:' & lt; div类=癿odal-header祝辞& lt; h5类=癿odal-title祝辞删除Bucket & lt;/div>“+
' & lt; div类=癿odal-footer”祝辞& lt;按钮类型=疤峤弧崩?癰tn ng-click”=叭啡?)”祝辞确定& lt;/button> +
“& lt;按钮类型=鞍磁ァ崩?癰tn”ng-click=叭∠?)在取消& lt;/button> & lt;/div>”,
纯:没错,
名称:“ngdialog-theme-default”,
宽度:600年,
范围:美元的范围,
控制器:函数(范围){
…
美元的范围。确认=function () {
…
};
美元的范围。取消=function () {
美元scope.closeThisDialog ();
};
}
});
};
之前
以上只是一个简单的示例,官方文档上还有通过id打开对话框,打开一个确认对话框等相关详细介绍。
另外有一篇对美元ngDialog介绍非常详细的文章,基本上就是把官方API翻译过来了。
附上文章链接https://www.jb51.net/article/139899.htm
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
