Я пытаюсь использовать плагин 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
для задержки, когда он запускается, но это кажется довольно большим взломом для меня. Есть ли более правильный способ сделать это?
UPDATE
Я завернул init()
в $timeout
, как этот
$timeout(function() {
scope.uploader.init();
}, 2000);
просто чтобы убедиться, что он будет вести себя так, как я думал, и, конечно же, с этой задержкой плагин будет настроен правильно и работает. Однако я не хочу полагаться на время $timeout
. Если бы был какой-то способ, я мог бы назвать scope.uploader.init();
после того, как шаблон связан, все должно работать нормально. Кто-нибудь знает хороший способ сделать это?