Question

我正在尝试使用AngularJS的jQuery插件（Plupload）。我创建了一个指令，它将成为我的文件上传“小部件”。该指令看起来像这样（链接函数中的代码是the example on the Plupload site的非常简化的版本）：

.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();运行时，id尚未插入到DOM中，因此Plupload会因为无法选择这些元素而抱怨和中断。如果我只是对模板中的fileUploadContainer和fileUploadDropArea ID进行硬编码，那么它的工作正常。但是，我真的只想在一个地方定义这些ID。

那么，在链接模板后，有什么办法可以在上传器上运行init()吗？我考虑过使用$timeout来延迟运行，但这对我来说似乎是一个非常大的黑客。有没有更正确的方法来实现这个目标？

更新

我将init()包裹在$timeout这样的

中

$timeout(function() {
    scope.uploader.init();
}, 2000);

只是为了确保它的行为与我的思维方式一致，果然，这个延迟会使插件正确设置并正常工作。但是，我不想依赖$timeout的时间安排。如果只是某种方式我可以在链接模板后调用scope.uploader.init();，一切都应该正常工作。有人知道这样做的好方法吗？

Answer 1

你的问题实际上是另一种方式 - 链接功能在模板放入后发生。所以在这种情况下，模板发生时不设置scope.uploaderProperties。

看起来你的模板对于templateUrl选项来说太花哨了，真的。您可以尝试使用jQuery手动设置id，或者在编译函数中设置所有内容。

http://docs.angularjs.org/guide/directive

AngularJS - 链接模板后调用javascript的任何方法？

1 个答案: