1,直接上代码 js代码
angular.module('ngFinder',[])
.directive('elFinder', function() {
return {
restrict: 'E',
scope: {
'url': '=url',
'selectFiles': '=',
},
link: function(scope, element, attrs, controller) {
var options = {
url : scope.url || '/elfinder',
commands : false,
handlers : {
select : function(event, elfinderInstance) {
var selected = event.data.selected,
curDir = elfinderInstance.cwd().name,
selectFileList = [],
tmpPath = ''; // 当前目录
//console.log(selected,curDir, selectFileList, tmpPath );
$.each(selected, function (index, item) {
tmpPath = elfinderInstance.path(item);
selectFileList.push({id: item, fullPath: tmpPath});
});
scope.$apply(function(){
scope.selectFiles = $('.ui-selected').text();
console.log(" scope.selectFiles", scope.selectFiles);
$
$(".elfinder-cwd-file").bind("click", function(e){
if ($(e.target).hasClass('ui-selected')) {
var clickedFileName = $(e.target).attr('name');
console.log("clickedFileName", clickedFileName);
}
})
})
}
}
};
$(element).elfinder(options);
},
};
})
2.html 代码
<div id="fileSelectedContainer" ng-controller="FileController" >
<div class="row">
<div class="col-md-6">
<ul style="list-style:none;line-height:24px;width:240px;margin-left:20px;background: #d4d4d4;">
<li>
{{selectFiles}}
</li>
</ul>
</div>
<div class="col-md-6">
<el-Finder class ="checked" select-files="selectFiles" data-url="'http://192.168.5.155:81/php/connector.minimal.php?rootPath=/'" >
</el-Finder>
</div>
</div>
</div>
3控制器代码
app.controller('FileController', function($scope, $rootScope, $http, $location, $window, $routeParams) {
$scope.selectFiles = [];
});
想用jquery实现 现在可以获取文件名 文件目录
现在的思路是想给选中的所有文件绑定一个click事件,然后判断是否有点击事件,单击选择文件 在点取消选择 还有就是切换目录的时候判断是否文件在同一个目录
拜托各位了大神! 现在最重要的是不知道怎么执行下一步了。。。。。
既然现在已经可以获取到文件了,那么就来个数组selectFiles
把选取的文件对象push
进去,这个数组通过ng-repeat
遍历到页面,已选择的文件都会在页面显示,那么只需要在这些文件上绑定一个click
事件,点击后从数组selectFiles
中把那个文件对象删除就行了