Создание директивы AngularJS с помощью Plupload

Я работаю над приложением, которое будет загружать файлы. Я хочу создать повторно используемый компонент загрузки файлов, который можно включить на любую из страниц, которым требуется функция загрузки файлов. Первоначально я думал, что могу просто использовать тег 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, поэтому я уверен, что просто что-то упускаю или делаю что-то не так. Как заставить работать эту директиву?

9
задан dnc253 30 June 2012 в 20:14
поделиться