需要实现的功能如图:
一、需要对所能编辑的属性建立对象,这样会极大方便后续工作
对于属性通常用一个angualr对象形式,所有输入框、选择框都是为其属性修改值
二、在应用的地方使用ng-style即可,其中吧属性例如backgroundImage转换为background-image需要写一个独立的函数来实现所有属性的转换
三、考虑到保存到数据库以及回显的处理
以上即完成了属性配置化,其中有亮点的地方为
1.上传图片:
上传图片使用formatData
$scope.changeChartsPicture = function (event) {
if (event.target.files[0]) {
var formData = new FormData();
formData.append("filename", event.target.files[0]);
$.ajax({
url: '/xxxx/uploadchartsbgpicture',
type: 'post',
processData: false,
contentType: false,
data: formData
}).then(function (data) {
if (data.code == "1") {
var imgPath = data.path + data.filename;
$scope.sceneConfigObj.options.chartStyle.backgroundImage = imgPath;
$scope.getUserChartsImgs();
} else {
alert('上传失败');
}
});
}
}
python代码
@api_view(http_method_names=['POST'])
@permission_classes((permissions.AllowAny,))
def uploadchartsbgpicture(request):
f = request.FILES['filename']
filename = time.strftime("%Y%m%d%H%M%S", time.localtime()) + f.name
id = request.user.id
path = './xxxx/user_' + str(id) + '/chartsbgimgs/'
if os.path.exists(path):
a = 1
else:
os.makedirs(path)
try:
distpath = path + filename
if os.path.exists(distpath) and os.path.isfile(distpath):
os.remove(distpath)
with open(path + filename, 'wb+') as destination:
for chunk in f.chunks():
destination.write(chunk)
except Exception as e:
a = e.args
return Response({'code': 1, "path": '/frontend/upload/user_' + str(id) + '/chartsbgimgs/', "filename": filename})
注意用request.FILES 和f.chunks来读取文件
两点二:用angular自定义组件
<user-imgs imgs="imgs" refresh-method="refreshStyle()" img-model="sceneConfigObj.options.globalStyle.backgroundImage"></user-imgs>
app.directive('userImgs', function () {
return {
restrict: 'E',
templateUrl: '/xxxxxx/select-img.html',
replace: true,
scope: {
imgs: '=', //存放图片的文件夹
imgModel: '=',//选中事件
refreshMethod: '&'//选中事件
},
link: function (scope, element, attrs, controller) {
},
controller: function ($scope, $http, $element, $timeout) {
$scope.imgSelect = function (imgPath) {
$scope.imgModel = imgPath;
$scope.refreshMethod();
};
$scope.delImg = function (index) {
$http.get(encodeURI('/api/dash/delUserImg?imgPath=' + $scope.imgs[index])).then(function (rs) {
if (rs.data.status == 'success') {
$scope.imgs.splice(index, 1);
}
});
};
}
};
});
directive的html
<div class="img-content">
<div class="img-item" ng-repeat="($index, imgPath) in imgs track by $index">
<div class="del-img" ng-click="delImg($index)">x</div>
<img ng-click="imgSelect(imgPath)" ng-src="{{ imgPath }}">
</div>
</div>