Я пытаюсь использовать плагин jQuery (Plupload) с AngularJS. Я создал директиву, которая будет моим "виджетом" загрузки файла. Директива выглядит следующим образом (Код в функции ссылки является очень упрощенной версией примера на сайте Plupload):
.directive('myFileUpload', function () {
return {
restrict: 'E',
replace: true,
link: function(scope, element, attrs) {
scope.uploaderProperties = {
runtimes : 'html5,flash,html4',
url : 'media/upload',
max_file_size : '10mb',
container: 'fileUploadContainer',
drop_element: 'fileUploadDropArea'
};
scope.uploader = new plupload.Uploader(scope.uploaderProperties);
scope.uploader.init();
scope.uploader.bind('FilesAdded', function(up, files) {
scope.$apply();
});
},
templateUrl: 'upload.html'
};
});
Мой файл upload.html выглядит так:
<div id="{{uploaderProperties.container}}">
<div id="{{uploaderProperties.drop_element}}" style="border: 1px black dashed;">Drop files here<br><br><br></div>
Files to upload:<br>
<div ng-repeat="currFile in uploader.files">{{currFile.name}} ({{currFile.size}}) </div>
<br><br>
<!-- for debugging -->
{{uploader.files}}
<br><br>
</div>
Когда я включаю директиву на свою страницу с элементом <my-file-upload>
, все привязки данных происходят правильно. Проблема в том, что при запуске scope.uploader.init();
идентификаторы еще не были вставлены в DOM, поэтому Plupload жалуется и ломается, поскольку не может выбрать эти элементы. Если я просто жестко запрограммирую идентификаторы fileUploadContainer
и fileUploadDropArea
в шаблоне, он будет работать нормально. Однако мне бы очень хотелось определить эти идентификаторы только в одном месте.
Итак, есть ли способ запустить init()
в загрузчике после того, как шаблон будет связан? Я думал об использовании $timeout
для задержки запуска, но мне это показалось довольно серьезным приемом. Есть ли более правильный способ сделать это?
ОБНОВЛЕНИЕ
Я завернул init()
в $timeout
вот так
$timeout(function() {
scope.uploader.init();
}, 2000);
просто чтобы убедиться, что он будет вести себя так, как я думал, и, конечно же, с этой задержкой плагин правильно настроен и работает. Однако я не хочу полагаться на время $timeout
. Если бы я мог каким-то образом вызвать scope.uploader.init();
после связывания шаблона, все должно было работать нормально. Кто-нибудь знает хороший способ сделать это?