未加星标

AngularJS模态框模板ngDialog的使用详解

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

项目开始的时候我们用的对话框是AngularJS的$modal模态框,但是后来发现$modal打开的对话框是相对页面静止的,如果对话框是一个很长的表单,这样体验度就不是很好了,还有$modal传$scope不是很灵活的原因,后来就改用的$ngDialog.

官方的API在这里:https://www.npmjs.com/package/ng-dialog

首先确定你的项目已经安装了$ngDialog需要的相关文件。

接下来一个简单的demo

del.html内容如下,就是你的对话框内容,这里比较简单,只是一个确认对话框

<meta charset="UTF-8">
<div class="modal-header">
<h4 class="modal-title">删除</h4>
</div>

<div class="modal-body">
<form autocomplete="off" class="file-brief file-brief-show form-validation" name="ObsForm" id="form-new-style">
<div class="col-sm-12 m-t-xs m-b-xs ">
<div class="form-group">
<label>您确认要删除吗?</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn" ng-click="confirm()" >确定</button>
<button type="button" class="btn" ng-click="cancel()">取消</button>
</div>

在你的Controller里添加你的方法:

$scope.del = function () {
ngDialog.open({
template: '/del.html',
className: 'ngdialog-theme-default',
scope: $scope,
controller: function ($scope) {
...
$scope.confirm = function () {
...
};
$scope.cancel = function () {
$scope.closeThisDialog();
};
}
});
};

这里template里是一个路径,其实如果对话框简单的话可以在template里直接写<div>内容,只是要加一个属性:plain:true,

对话框的高度宽度都可以自定义,width:500,//绝对宽度。或者width:‘%50' //相对宽度

针对以上两点,示例:

$scope.delBucket = function () {
ngDialog.open({
template: '<div class="modal-header"><h4 class="modal-title">删除Bucket</h4></div>' +
'<div class="modal-footer"><button type="submit" class="btn" ng-click="confirm()" >确定</button>'+
'<button type="button" class="btn" ng-click="cancel()">取消</button></div>',
plain:true,
className: 'ngdialog-theme-default',
width:600,
scope: $scope,
controller: function ($scope) {
...
$scope.confirm = function () {
...
};
$scope.cancel = function () {
$scope.closeThisDialog();
};
}
});
};
以上只是一个简单的示例,官方文档上还有通过id打开对话框,打开一个确认对话框等相关详细介绍。

另外有一篇对$ngDialog介绍非常详细的文章,基本上就是把官方API翻译过来了。

附上文章链接http://www.jb51.net/article/139899.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:从源码看angular/material2 中 dialog模块的实现方法BootStrap+Angularjs+NgDialog实现模式对话框Angular使用动态加载组件方法实现Dialog的示例

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: AngularJS删除UT其实
tags: lt,gt,scope,div,class,modal,button,对话框,function,ngDialog,form,ng,confirm,btn,type
分页:12
转载请注明
本文标题:AngularJS模态框模板ngDialog的使用详解
本站链接:http://www.codesec.net/view/576449.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(40)