开放原子开发者工作坊

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