发表于: 2017-07-04 23:30:19
1 1002
今天完成的事情:完成了用户列表页的html和部分js
明天计划的事情:完成用户列表页和医师详情页
遇到的问题:
对angular-strap模态框的使用
angular-strap模态框能够很方便的写出自定义样式的模态框:
html文件,注意要按照模态框的格式来写
<div class="modal ng-scope top am-fade" tabindex="-1" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a type="button" class="close" style="font-size: 15px;padding-top: 8px" ng-click="cancel()"><span aria-hidden="true">关闭</span></a>
<h4 style="font-weight: normal" class="modal-title">操作提示</h4>
</div>
<div class="modal-body text-center">
<p style="font-size: 16px;color: #999">{{title}}</p>
<p style="font-size: 20px">{{content}}</p>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="cancel()">取消</button>
<button class="btn btn-primary" type="button" ng-click="ok()">确定</button>
</div>
</div>
</div>
</div>
在config.js添加confirm方法:
$rootScope.operationConfirm = function (title, content, okFn, cancelFn) {
var modal = $modal({
html: true,
show: false,
templateUrl: 'views/template/operationConfirm.html',
controller: function ($scope) {
$scope.title = title;$scope.content = content;
//html中确定按钮的点击事件触发的函数
$scope.ok = function () {
typeof okFn == 'function' && okFn();
modal.$promise.then(modal.hide);};
//html中取消按钮的点击事件触发的函数
$scope.cancel = function ($scope) {
typeof cancelFn == 'function' && cancelFn();
modal.$promise.then(modal.hide);
};
}
});
modal.$promise.then(modal.show);
};
在控制器里面的应用,接口和假数据还没写好,所以先这样写着:
第三个参数是个函数,可以在里面再调用一个模态框,实现点击确定或取消后再弹出模态框,展示操作结果
vm.freezeUser = function(id,type,status) {if (status === 0) {
/*一般情况下取消对应的函数可以不写,模态框消失就行了*/
$rootScope.operationConfirm("冻结后改账户不可被使用", "是否执行冻结操作?",function () {
/*******
* 发送冻结请求* *****/
//成功后再调用alert模态框
$rootScope.alert("冻结成功", function () {})
});
}
else if (status === 1) {
$rootScope.operationConfirm("解冻后该账户可继续使用。", "是否执行解冻操作?", function () {
/*******
* 发送解冻请求
* *************/
$rootScope.alert("解冻成功", function () {})
});
}
};
收获:如上
评论