【Modal】

转载

mob604756e7db9c 2016-09-23 11:32:00

文章标签 bootstrap html ide 字段柱状图 文章分类 后端开发

1.Bootstrap

Modal

文档里标签、属性、方法、事件都写的很清楚

2.AngularUI - Bootstrap

UI Bootstrap

2.1

$scope.open = function(chart) {
    var modalInstance = $modal.open({
        templateUrl: "updateChartPanel.html",
        windowClass: "updateChartPanel",
        controller: UpdateChartPanelCtrl,
        resolve: {
            savedObj: function() {
                return {
                    chart: chart
                }
            }
        }
    })

    modalInstance.result.then(function(d) {
        updateChart(d.newObj, d.oldObj)
    }, function() {})//取消触发
}

2.2

var UpdateChartPanelCtrl = function($scope, $modalInstance, savedObj) {
    $scope.chart = ChartUtils.deepCopy(savedObj.chart)

    $scope.ok = function() {
        $modalInstance.close({
            newObj: $scope.chart,
            oldObj: savedObj
        })
    }

    $scope.cancel = function() {
        $modalInstance.dismiss("cancel")
    }
}
UpdateChartPanelCtrl.$inject = ["$scope", "$modalInstance", "savedObj"];

2.3

dashboard.run(["$templateCache", function($templateCache) {
$templateCache.put("updateChartPanel.html", ['<div class="rzy-modal-header modal-header row">',
        '<h4 class= "rzy-modal-title modal-title col-md-6">编辑</h4>',
        '<div class="col-md-6"></div>',
    '</div>',
    '<div class="rzy-modal-body modal-body">',
    '<div class="line clearfix">',
    '<label class="pull-left">图表名：</label>',
    '<input class="form-control ipt pull-left" type="text" ng-model="chart.chart_name">',
    '</div>',
    '<div class="line clearfix ng-hide" ng-show="chart.shape_type!=\'pie\'&&chart.shape_type!=\'stat\'">',
    '<label class="pull-left">图表类型：</label>',
    '<span class="option pull-left" ng-class="{\'active\':chart.shape_type==\'column\'}" ng-click="chart.shape_type=\'column\'">柱状图</span>',
    '<span class="option pull-left" ng-class="{\'active\':chart.shape_type==\'line\'}" ng-click="chart.shape_type=\'line\'">线图</span>',
    '<span class="option pull-left" ng-class="{\'active\':chart.shape_type==\'area\'}" ng-click="chart.shape_type=\'area\'">区域图</span>',
    '</div>',
    '<div class="line clearfix" ng-if="chart.shape_type==\'stat\'">',
    '<label class="pull-left">字段说明：</label>',
    '<ul class="pull-left stat-edit-list">',
    '<li class="clearfix" ng-repeat="item in chart.rows">',
    '<input class="form-control ipt pull-left" type="text" ng-model="item[\'row_y\'][0][\'describer\']">',
    '<span class="pull-left" ng-bind="item[\'row_y\'][0][\'value\']"></span>',
    '</li>',
    '</ul>',
    '</div>',
    '</div>',
    '<div class="rzy-modal-footer modal-footer">',
        '<button class="btn btn-primary" ng-click="ok()">确认</button>',
        '<button class="btn btn-warning" ng-click="cancel()">取消</button>',
    '</div>'].join(''))
}])