摘要：
$uibModal&&$uibModalInstance $uibModal&&$uibModalInstance$uib莫代尔和$uibModalInstance是angularJS的弹出控件，github地址http://angular-ui.github.io/bootstrap/#/modal$uibModal:负责调用弹出窗口$uibModelInstance：弹出实例示例如下：弹出模板：1˂scripttype=“text/n
$uibModal和$uibModalInstance是一款angularJS的弹窗控件，github地址 http://angular-ui.github.io/bootstrap/#/modal
$uibModal:负责调出弹窗
$uibModalInstance：弹窗实例
例子如下：
弹窗 template:
1 <script type="text/ng-template" id="detailWin"> 2 <div class="marketing-strategyList-win"> 3 <div class="modal-header"> 4 <h4 class="modal-title">{{modalTitle}}</h4> 5 <div class="btn-close" ng-click="closeModal()">×</div> 6 </div> 7 <div class="modal-body"> 8 <div class="cui-table"> 9 <table class="table table-bordered mb20"> 10 <thead class="table-header"> 11 <tr class="table-row"> 12 <th class="th-unit"><div class="th-countent">业务场景</div></th> 13 <th class="th-unit"><div class="th-countent">活动数</div></th> 14 15 </tr> 16 </thead> 17 <tbody class="table-body"> 18 <tr class="table-row" ng-repeat="$tr in tableData.strategyViewList"> 19 <td class="td-unit">{{$tr.sceneName | nullFilter:'-'}}</td> 20 <td class="td-unit">{{$tr.activeCount}}</td> 21 </tr> 22 </tbody> 23 </table> 24 </div> 25 <div class="btn-warp"> 26 <a class="btn cui-button cui-button-theme" ng-click="viewDetail()">查看详情</a> 27 </div> 28 </div> 29 </div> 30 </script>
调用弹窗controller
1 app.controller('marketing.strategyCtrl', ['$scope', function($scope) { 2 3 $uibModal.open({ 4 animation: true, //弹窗toggle时是否有动画 5 template: $('#detailWin').html(), //弹窗模板 6 controller: 'marketing.strategyCtrl.win', // 弹窗controller 7 size: 'sm', //弹窗大小 sm、md、ld 8 resolve: { //数据交互 9 $postParams: function() { 10 return { 11 modalTitle: tag.name + act.name + "共计" + totalCount + '次', 12 data: d 13 }; 14 } 15 } 16 }).result.then(function(postData) { 17 var pieData = pieCenter.initPieData(postData); 18 pieCenter.renderPieView(pieData); 19 }); 20 }])
弹窗
1 app.controller('marketing.strategyCtrl.win', ['$scope', '$postParams', '$uibModalInstance', 2 function($scope, $postParams, $uibModalInstance) { 3 $scope.modalTitle = $postParams.modalTitle; 4 $scope.tableData = $postParams.data; 5 window.tableData = $scope.tableData; 6 //关闭 7 $scope.closeModal = function() { 8 $uibModalInstance.dismiss(); 9 }; 10 //查看详情 11 $scope.viewDetail = function() { 12 //回调数据 13 $uibModalInstance.close({ 14 data: $scope.tableData, 15 title: $scope.modalTitle 16 }); 17 }; 18 } 19 ])
$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);
1 { 2 "customParams": { 3 "parentState": "/marketing/userTpl", 4 "pageType": "edit" 5 }, 6 "path": "/assets/modules/marketing/userTpl/", 7 "name": "/marketing/userTplEdit", 8 "url": "/marketing/userTplEdit?id", 9 "templateUrl": "templates/detail.tpl", 10 "js": [ 11 "js/controllers/detailCtrl.js", 12 "js/services/service.js" 13 ], 14 "css": [ 15 "css/css.css" 16 ], 17 "deps": [] 18 }
1 $scope.pageType = $state.current.customParams.pageType; 2 $scope.id = $stateParams.id;