一开始，我会说我是angular的初学者，并且我学习了它。我计划创建一个画廊系统，用户可以在其中创建多个画廊。我正在使用指令http.get parital进行编译并为拖放图像创建表单。对于一种形式，效果很好，但是当我添加更多形式时，我的函数将执行乘法时间。我认为我的逻辑对此不好，或者我做错了事。这是我的指令。
directive("contentControl",function($http,$compile){
return {
template: 'Click here',
link: function(scope, element, attrs) {
element.bind("click", function () {
$http.get("/js/angular/File/view/admin/FileUpload.html").then(function(resp) {
var html = resp.data;
var templateGoesHere = angular.element(document.getElementById('templateGoesHere'));
templateGoesHere.append(html);
$compile(templateGoesHere)(scope);
});
});
},
}
模板
<div ng-controller="FileController">
<button ng-click="upload(files)"></button>
<form name="myForm">
<div ngf-drop="add($files)" ng-model="files" class="drop-box clearfix"
ngf-drag-over-class="dragover" ngf-multiple="true">
<div ng-repeat="image in images">
<div class="col-sm-3">
<img ngf-thumbnail="!image.file.$error && image.file"
ngf-size="{width: 5024, height:200, quality: 0.9}"
class="img-responsive">
</div>
</div>
</div>
</form>
</div>
和控制器
.controller('FileController', function ($scope, Upload) {
$scope.files = [];
$scope.images = [];
$scope.add=function(files)
{
console.log(files);
}
$scope.upload = function (files) {
angular.forEach($scope.images,function(file)
{
});
//angular.forEach($scope.images,function(file)
//{
// console.log(file.file);
// Upload.upload({
// url: '/gallery/create',
// fields: {'name': file.file.name}, // additional data to send
// file: file.file
// });
//});
}
});
我正在寻找隔离数据，或者有人可以向我解释创建多层画廊的更好逻辑
这是正常现象，因为每次使用伪指令时，都会创建一个新的http.get。
删除此伪指令，并在单击element时使用ngInclude＆ngIf包括您的模板。
<a href="#" ng-click="showMyTemplate()">Click here</a>
<div ng-if="showTmp">
<div ng-include="template.html"/>
</div>
在控制器中
// init
$scope.showTmp = false;
$scope.showMytemplate = function(){
$scope.showTmp = true;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句