Проблемы области при получении Jquery-File-Upload для работы с AngularJS

Я пытаюсь реализовать функцию загрузки нескольких файлов и наткнулся на этот http://blueimp.github.io/jQuery-File-Upload/angularjs.html.

В моей форме я использую ng-switch для загрузки в разные части формы как часть мастера форм. Вторая часть формы требует, чтобы пользователь загружал изображения, и здесь у меня все начинает ломаться. Я понимаю, почему это не работает - ng-switch вместе со многими другими директивами создает новую область. Обходной путь заключается в том, чтобы использовать объекты, а не «записывать» непосредственно в область видимости — $scope.booking.amount, а не $scope.amount.

Итак, как мне заставить jquery-file-upload или любую другую стороннюю библиотеку, если на то пошло, правильно «привязать» к моему объекту и предотвратить эти проблемы с областью?

Соответствующие части jquery-file-upload:

Соответствующие части моего кода:

Просмотреть

<div data-ng-switch="getCurrentStep()" data-ng-animate="'slide'">
<div data-ng-switch-when="one">
<!-- First part of form -->
    <textarea data-ng-model="viewing.remarks" type="text" rows="4" cols="10" placeholder="A short description of the property"></textarea>
</div>
<div data-ng-switch-when="two">
<!-- Second part of form -->
    <input type="file" name="files[]" multiple data-ng-disabled="disabled">
    <ul class="inline-list">
        <li data-ng-repeat="file in queue" data-ng-switch data-on="!!file.thumbnailUrl">
        <div class="preview" data-ng-switch-when="true">
            <a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>
                  <img data-ng-src="{{file.thumbnailUrl}}" alt="">
                </a>         
                <a href="" class="text-center" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">Cancel</a>
        </div>
        <div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
        </li>
    </ul>
</div>

Controller

Главное, у меня есть объект просмотра, который вызывается из сервиса.

$scope.viewing = new Viewing()

Итак, в текущем контексте кода, как я могу получить $scope.queue, который из jquery-file-upload, общается с моим объектом $scope.viewing?


jquery angularjs jquery-file-upload
person super9    schedule 03.08.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Так что ответ на самом деле довольно прямолинеен.

Сначала я должен добавить директиву data-file-upload="options" в новую область видимости, созданную ng-switch. Так что это означает перемещение его из <form data-file-upload ....> в div внутри второго переключателя ng.

После этого привязать его к моему объекту просто

$scope.queue = [];
$scope.viewing.fileQueue = $scope.queue

$scope.queue происходит из углового файла blueimp и должен быть сначала инициализирован в моем контроллере.

person super9    schedule 05.08.2013