angularJS的插件使用

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