3

AngularJS で jQuery プラグイン ( Plupload )を使用しようとしています。ファイルアップロード「ウィジェット」となるディレクティブを作成しました。ディレクティブは次のようになります (リンク関数のコードは、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();実行時に id がまだ DOM に挿入されていないため、それらの要素を選択できないため、Plupload が不平を言って中断することです。テンプレートに IDfileUploadContainerとID をハードコードするだけで、問題なく動作します。fileUploadDropAreaただし、これらの ID を 1 か所だけで定義したいと考えています。

init()テンプレートがリンクされた後、アップローダでを実行する方法はありますか? 実行時に遅延を使用することを考えまし$timeoutたが、それは私にとってかなり大きなハックのようです。これを達成するより正しい方法はありますか？

アップデート

私はinit()この$timeoutように

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

私が考えていたように動作することを確認するためだけに、確かに、この遅延により、プラグインは正しくセットアップされ、機能します. ただし、 のタイミングに依存する必要はありません$timeout。scope.uploader.init();テンプレートがリンクされた後に呼び出すことができる何らかの方法があれば、すべて正常に動作するはずです。これを行う良い方法を知っている人はいますか？

4

1 に答える 1

1

問題は実際には逆です。リンク関数はテンプレートが挿入された後に発生します。したがって、この場合、テンプレートが発生したときにscope.uploaderPropertiesは設定されません。

本当に、あなたのテンプレートはtemplateUrlオプションにはあまりにも凝っているようです。jQueryを使用してIDを手動で設定するか、コンパイル関数ですべてを設定してみてください。

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

于 2012-07-12T12:23:46.607 に答える