1.Bootstrap
文档里标签、属性、方法、事件都写的很清楚
2.AngularUI - 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(''))
}])2.4 问题
ng-model input inside an angular-ui modal controller is undefined
Scope issue in AngularJS using AngularUI Bootstrap Modal