1

我正在尝试实现多文件上传功能,并遇到了这个http://blueimp.github.io/jQuery-File-Upload/angularjs.html

在我的表单中,我使用ng-switch作为表单向导的一部分加载表单的不同部分。表单的第二部分要求用户上传图片,这就是我开始崩溃的地方。我理解它为什么会破坏 --ng-switch与许多其他指令一起创建一个新范围。解决方法是使用对象而不是直接“写入”范围 -$scope.booking.amount而不是$scope.amount

那么如何让 jquery-file-upload 或任何其他 3rd 方库正确地“绑定”到我的对象并防止这些范围问题?

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>

控制器

最主要的是我有一个从服务调用的查看对象。

$scope.viewing = new Viewing()

那么在当前的代码上下文中,我如何获得$scope.queue来自 jquery-file-upload 的与我的$scope.viewing对象对话?

4

1 回答 1

0

所以答案其实很直接。

首先,我必须data-file-upload="options"在 ng-switch 创建的新范围内添加指令。因此,这意味着将其从<form data-file-upload ....>第二个 ng-switch 中的 div 移动。

之后,将它绑定到我的对象很简单

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

$scope.queue源自 blueimp 角度文件,需要先在我的控制器中初始化。

于 2013-08-05T10:33:30.973 回答