Я работаю над приложением, которое будет загружать файлы. Я хочу создать повторно используемый компонент загрузки файлов, который можно включить на любую из страниц, которым требуется функция загрузки файлов. Первоначально я думал, что могу просто использовать тег JSP. Однако недавно мы обнаружили AngularJS и теперь хотим использовать его во всем приложении. Итак, я хочу создать директиву, которая позволит мне просто добавить тег
в функцию загрузки.
Сначала я сделал свою функцию загрузки собственной HTML-страницей, чтобы убедиться, что AngularJS хорошо работает с плагином Plupload . Я собрал что-то вроде этого:
Drag files to here
Files to upload:
{{currFile.name}} ({{currFile.size}})
{{uploader.files}}
MyApp.js выглядит так:
function FileUploadCtrl($scope)
{
$scope.uploader = new plupload.Uploader({
runtimes : 'html5,flash,html4',
url : 'media/upload',
max_file_size : '10mb',
container: 'uploadContainer',
drop_element: 'dropArea'
});
$scope.uploader.init();
$scope.uploader.bind('FilesAdded', function(up, files) {
$scope.$apply();
});
}
Когда я перетаскиваю файлы,Я вижу, что появляются имена файлов, а вывод {{uploader.files}} меняется с []
на файлы в объекте загрузчика. Итак, теперь я хочу превратить это в директиву. Я беру все содержимое тега body и сохраняю его в файл с именем upload.html. Затем я добавил следующее в myApp.js:
angular.module('myApp', [])
.directive('myAppUpload', function () {
return {
restrict: 'E',
templateUrl: 'upload.html',
};
});
Затем у меня есть HTML-файл, подобный этому:
This will be replaced
Когда я загружаю эту HTML-страницу, тег
загружает файл upload.html. Однако он не выполняет привязку данных. Внизу я вижу {{uploader.files}}
вместо []
, который я видел изначально, когда это была собственная страница.
Я очень новичок в AngularJS, поэтому я уверен, что просто что-то упускаю или делаю что-то не так. Как заставить работать эту директиву?