$uibModal&&$uibModalInstance

$uibModal和$uibModalInstance是一款angularJS的弹窗控件,github地址 http://angular-ui.github.io/bootstrap/#/modal

$uibModal:负责调出弹窗

$uibModalInstance:弹窗实例

例子如下:

弹窗 template:

 <script type="text/ng-template" id="detailWin">
<div class="marketing-strategyList-win">
<div class="modal-header">
<h4 class="modal-title">{{modalTitle}}</h4>
<div class="btn-close" ng-click="closeModal()">×</div>
</div>
<div class="modal-body">
<div class="cui-table">
<table class="table table-bordered mb20">
<thead class="table-header">
<tr class="table-row">
<th class="th-unit"><div class="th-countent">业务场景</div></th>
<th class="th-unit"><div class="th-countent">活动数</div></th> </tr>
</thead>
<tbody class="table-body">
<tr class="table-row" ng-repeat="$tr in tableData.strategyViewList">
<td class="td-unit">{{$tr.sceneName | nullFilter:'-'}}</td>
<td class="td-unit">{{$tr.activeCount}}</td>
</tr>
</tbody>
</table>
</div>
<div class="btn-warp">
<a class="btn cui-button cui-button-theme" ng-click="viewDetail()">查看详情</a>
</div>
</div>
</div>
</script>

调用弹窗controller

 app.controller('marketing.strategyCtrl', ['$scope', function($scope) {

     $uibModal.open({
animation: true, //弹窗toggle时是否有动画
template: $('#detailWin').html(), //弹窗模板
controller: 'marketing.strategyCtrl.win', // 弹窗controller
size: 'sm', //弹窗大小 sm、md、ld
resolve: { //数据交互
$postParams: function() {
return {
modalTitle: tag.name + act.name + "共计" + totalCount + '次',
data: d
};
}
}
}).result.then(function(postData) {
var pieData = pieCenter.initPieData(postData);
pieCenter.renderPieView(pieData);
});
}])

弹窗

 app.controller('marketing.strategyCtrl.win', ['$scope', '$postParams', '$uibModalInstance',
function($scope, $postParams, $uibModalInstance) {
$scope.modalTitle = $postParams.modalTitle;
$scope.tableData = $postParams.data;
window.tableData = $scope.tableData;
//关闭
$scope.closeModal = function() {
$uibModalInstance.dismiss();
};
//查看详情
$scope.viewDetail = function() {
//回调数据
$uibModalInstance.close({
data: $scope.tableData,
title: $scope.modalTitle
});
};
}
])

$stateProvider+$requireProvider配置路由,$state+$stateParams在路由中配置参数

var stateOptions = {
"url": item.url,
"templateUrl": path + item.templateUrl + "?v=" + version,
"customParams": item.customParams,
"resolve": {
deps: $requireProvider.require(tplResultArray),
js: $requireProvider.requireJS(jsResultArray),
css: $requireProvider.requireCSS(cssResultArray)
}
};
$stateProvider.state(item.name, stateOptions);
 {
"customParams": {
"parentState": "/marketing/userTpl",
"pageType": "edit"
},
"path": "/assets/modules/marketing/userTpl/",
"name": "/marketing/userTplEdit",
"url": "/marketing/userTplEdit?id",
"templateUrl": "templates/detail.tpl",
"js": [
"js/controllers/detailCtrl.js",
"js/services/service.js"
],
"css": [
"css/css.css"
],
"deps": []
}
 $scope.pageType = $state.current.customParams.pageType;
$scope.id = $stateParams.id;

angularJS的插件使用的更多相关文章

  1. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  2. angularJS 常用插件指令

    长时间没有登入博客园了,今天突然想了想,当初开这个的目的,其实就是为了记录你当下的一个状态和累计一些问题,所以记录这些还是很有意义,毕竟不是什么牛,靠脸又吃不饱的这个年代,需要留下一些东西给自己看也好 ...

  3. 转AngularJS路由插件

    AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析 标签: angular源码angularjs 2016-05-04 13:14 916人阅读 评论(0) ...

  4. angularjs之插件ngRoute和ngAnimate

    使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html l ...

  5. angularjs上传图片插件使用

    一. angurlajs 相关 远程 jar 包 https://code.angularjs.org/angular-1.0.1.min.js 二. 正文 1. html 部分 <!-- 需要 ...

  6. Angularjs 表格插件的使用

    对于相关的table组件可以使用:UI Grid (ng-grid),ng-table,smart table,Angular-Datatables,tablelite,kendo-ui中的grid. ...

  7. angularJs FileUpload插件上传同一文件无效问题记录

    参考:https://blog.csdn.net/qq_34829447/article/details/83780392 问题:使用FileUpload插件进行文件上传时,发现无法上传与上个文件相同 ...

  8. Sublime Text 3安装AngularJS插件

    Sublime Text 3是目前笔者用过的最好用的代码编辑器之一,界面如下图所示: 我们可以用该编辑器开发AngularJS应用,首先需要安装AngularJS提示插件. 需要以下几步: 1.安装P ...

  9. angularJS实现可编辑的下拉框

    将angularJS与插件select2结合使用即可 <!DOCTYPE html><html lang="en"><head>    < ...

随机推荐

  1. Spring Boot应用的后台运行配置

    酱油一篇,整理一下关于Spring Boot后台运行的一些配置方式.在介绍后台运行配置之前,我们先回顾一下Spring Boot应用的几种运行方式: 运行Spring Boot的应用主类 使用Mave ...

  2. JavaOOP-继承

    继承 1.继承的概念 继承是类与类之间的关系,是一个很简单很直观的概念,与现实世界中的继承(例如儿子继承父亲财产)类似. 继承可以理解为一个类从另一个类获取方法和属性的过程.如果类B继承于类A,那么B ...

  3. iOS 消息发送与转发详解

    Objective-C 是一门动态语言,它将很多静态语言在编译和链接时期做的事情,放到了运行时来处理.之所以能具备这种特性,离不开 Runtime 这个库.Runtime 很好的解决了如何在运行时期找 ...

  4. python 函数 装饰器的使用方法

    一.装饰器  首先,我们要了解到什么是开放封闭式原则? 软件一旦上线后,对修改源代码是封闭的,对功能的扩张是开放的,所以我们应该遵循开放封闭的原则. 也就是说:我们必须找到一种解决方案,能够在不修改一 ...

  5. 移动端Web资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  6. JavaScript(第三十二天)【Ajax】

    2005年Jesse James Garrett发表了一篇文章,标题为:"Ajax:A new Approach to Web Applications".他在这篇文章里介绍了一种 ...

  7. JavaScript(第八天)【时间与日期】

    ECMAScript提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期时间信息的方法. 一.Date类型 ECMAScript中的Date类型是在早期Java中java.util ...

  8. 【Alpha】随笔集合

    Daily Scrum Meeting 第一天 [Alpha]Daily Scrum Meeting第一次 第二天 [Alpha]Daily Scrum Meeting第二次 第三天 [Alpha]D ...

  9. 高级软件工程2017第7次作业--C++团队项目:Beta阶段综合报告

    1.Beta阶段敏捷冲刺每日报告 Bate版敏捷冲刺报告--day0 Bate版敏捷冲刺每日报告--day1 Bate敏捷冲刺每日报告--day2 Bate敏捷冲刺每日报告--day3 Bate敏捷冲 ...

  10. 201621123060《JAVA程序设计》第三周学习总结

    1. 本周学习总结 1.1写出你认为本周学习中比较重要的知识点关键词,如类.对象.封装等. 关键词:类.方法.属性.对象.多态.继承.封装.面向对象.> 1.2 用思维导图或者Onenote或其 ...