angularJS的插件使用

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

$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;

posted on 2017-04-10 11:39 peace_1 阅读(254) 评论(0) 编辑收藏举报