2

jQuery File Upload プラグインとこ​​のディレクティブの要点を使用してファイル アップロード ディレクティブを作成しようとしていますhttps://gist.github.com/thoughtpalette/4726114

profile-ctrl.js のオブジェクトの ID をアップロード フォームの送信機能に渡す必要があります。

私のディレクティブはコントローラーの外側にあり、オブジェクトを $rootScope に設定して、ディレクティブでキャッチ/パスすることができませんでした。

url: in fileupload で魔法が起こります。API を介してコントローラーを呼び出し、ファイル情報と、できれば profile-ctrl.js のマーチャント オブジェクトにある vendorId を渡します。$scope.merchant

残念ながらプロジェクトの構造上、フィドルに投稿できません

私の指令:

//jqueryFileUpload-Plugin 
//https://github.com/blueimp/jQuery-File-Upload
define(['jquery',
        'angular',
        'core',
        'source/core/helpers/urlHelper.js'],
    function ($, angular, core, urlHelper) {
    "use strict";
    return [ function ($compile) {
        return {
            restrict:'E',
            scope: {
                merchant: '=ngModel'
            },
            compile:function(el,attrs, scope){
                var compiler = this,
                elem = el,
                vendorId = scope.merchant.id;
                instanceFn = function() {
                    var currentScope = this,
                        fileInputDiv = $(' <span class="btn btn-success fileinput-button">'+
                        '<i class="icon-plus icon-white"></i>'+
                        '<span>Upload Logo</span>'+
                        '<input type="file" name="files[]" single>'+
                        '</span>').appendTo(elem),
                        fileInput = fileInputDiv.find('input'),
                        fileList = $('<div class="UploaderList">'+
                        '<table>'+
                        '<tr>'+
                        '<td>File to Upload</td>'+
                        '</tr>'+
                        '</table>'+
                        '</div>').appendTo(elem),
                        button = $('<button class="btn">Submit</button>').appendTo(elem);

                    button.hide();
                    $('<div class="uploader">').appendTo(elem);
                    $('</div>').appendTo(elem);

                    fileInput.fileupload({
                        url:urlHelper.vendor.uploadLogo(vendorId),
                        dataType: 'json',
                        add:function (e, data) {

                            button.show();

                            // this will add a handler which will submit this specific file
                            button.bind('click.uploadsubmit', function(){ 
                                data.submit();
                            });
                            $.each(data.files, function (index, file) {
                                $("<tr><td>"+file.name+"</td><td></td><tr>").appendTo(fileList.find('table:first'));
                            });
                        },
                        // for each file
                        done: function (e, data) {

                            button.hide();

                            var result = "",
                                r = data.result,
                                file = data.files[0]; // we only support single file upload by now
                            // error

                            // CHANGE THIS PART FOR YOUR REQUIREMENTS (I have a json repsonse)

                            if(r.success !== undefined && r.success === false){
                                result = "<span class='error'>Unknown error</span>";
                                if(r.errors !== undefined && r.errors.length > 0 && r.errors[0].message !== undefined)
                                {
                                    result = "<span class='error'>"+r.errors[0].message+"</span>";
                                }
                            }
                            else{
                                result = "<span class='success'>OK</span>";
                            }

                            $("td:contains('"+file.name+"')").next().html(result);
                        },
                        progressall:function (e, data) {
                            var progress = parseInt(data.loaded / data.total * 100, 10);
                        },
                        // called only once... (wen submit button is clicked)
                        start:function(e){

                            // we start the upload, so we do also cleanup jobs right now:
                            button.unbind('click.uploadsubmit'); // importan - remove all event handlers
                            button.hide();
                            fileInputDiv.hide();

                        }
                    });

                };
                return instanceFn;
            }

        };
    }]; 
});

HTML 経由のディレクティブ呼び出し:

<jquery-File-Upload ng-model="merchant"></jquery-File-Upload>

したがって、現在、マーチャントはディレクティブで未定義を返します。誰かがそれを渡すのを手伝ってくれますか?

4

1 に答える 1

1

コメントで述べたように、コンパイル関数の 3 番目の引数はスコープではなく、transclude リンク関数です。興味があれば、これを使用する方法の例を次に示します。

定義する instanceFn は、コンパイル関数によって返されるため、リンク関数です。リンク関数の最初の引数はスコープであり、スコープでmerchant定義する必要があります。

$watch()ingmerchantを試してから、変更に気付いたらロジックを実行します。

于 2013-02-06T23:21:34.853 に答える