angularJS的插件使用

Posted 2020-09-09

$uibModal&&$uibModalInstance

$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 ])