2017-08-15 4 views
0

私はdropzone.jsを使用してアプリケーションに画像をアップロードしています。生成されたプレビューをanglejsと互換性があるようにして、スコープ変数に基づいて画像を処理できるようにします。アップロードしたすべての画像をマスターフォトアレイに挿入し、写真プレビュー要素のすべてをフォトアレイのオブジェクトにマップしたいと考えています。どのように動的AJAXコンテンツを双方向モデルバインディングの配列にフックします-anguljarjs

私は、ファイルを追加するためにdropzoneイベントにフックし、角度js互換にするためにテンプレートをコンパイルします。問題は、スコープ内の配列にイメージセットをフックする方法がわからないことです。なぜなら、インデックスを持つng-repeatなどで何もしないからです。

dropzoneから生成されたコンテンツをスコープ配列のangularjsオブジェクトと区別して関連付けるにはどうすればよいですか?

ドロップゾーンの完全な機能:

this.on("complete", function (file) { 
    //Stop the loading icon. 
    file.previewElement.querySelector(".loader").style.display = 'none'; 

    //Compile all angular items. 
    compileAngularElement(file.previewElement, "PhotoController"); 
}); 

テンプレート:より多くのコード

<div id="template" class="gallery-template-base"> 
    <div class="gallery-thumb mb-lg"> 
    <img data-dz-thumbnail> 
    <a class="remove-image" data-dz-remove href="#"> 
     <i class="fa fa-trash-o"></i> 
    </a> 
    <a class="mark-featured" href="#"> 
     <i class="fa fa-star-o"></i> 
    </a> 
    <span class="loader"> 
     <i class="fa fa-spinner fa-spin"></i> 
    </span> 
</div> 
<div class="clearfix"></div> 
<div style="display:none;" class="alert alert-danger" data-dz-errormessage> 
</div>           
</div> 

編集角度コントローラは、基本的には現時点では何もありません:

RRAngular.controller('PhotoController', ['$scope', '$http', function ($scope, $http) { 
      $scope.Photos = []; 
     }]); 

写真の配列は、私が書きたいものです。 {photoName: "filename"、photoID:44}のようなオブジェクトを作成し、それを配列に埋めたいと思います。私の質問は、私のdropzoneを生成したプレビュー要素に、作成したオブジェクトをどのように関連付けるのかです。配列の最初の要素のphotoNameを変更すると、最初の画像のフォトナームのみを変更したいだけです。

Dropzone.options.photoDropzone = { 
      paramName: "UploadedImage", // The name that will be used to transfer the file 
      maxFilesize: 10, // MB 
      thumbnailWidth: 300, 
      thumbnailHeight: 169, 
      acceptedFiles: "image/*", 
      previewsContainer: ".dropzone-previews", 
      previewTemplate: previewTemplate, 
      init: function() { 
       this.on('error', function (file, errorMessage) { 
        //Show the error box. 
        file.previewElement.querySelector("[data-dz-errormessage]").style.display = 'block'; 
       }); 
       this.on("success", function (file, responseData) { 
        //Set up the ajax data for the file. 
        SetupPhotoTemplate(file.previewElement, responseData.ResultObject.property_photo_id, responseData.ResultObject.photo_order); 
       }); 
       this.on("addedfile", function (file) { 
        //Start the loading icon. 
        file.previewElement.querySelector(".loader").style.display = 'block'; 
       }); 
       this.on("complete", function (file) { 
        //Stop the loading icon. 
        file.previewElement.querySelector(".loader").style.display = 'none'; 

        //Compile all angular items. 
        compileAngularElement(file.previewElement, "PhotoController"); 
       }); 

      } 
     }; 

上記のテンプレート要素を完全な関数で見ることができます。これをコンパイルしてください。この時点では、$ scope.photos.Add(MYPHOTOOBJECT)のような処理を行い、そのオブジェクトの値をテンプレートにバインドしたいと考えています。特定のテンプレートと配列内のオブジェクトを関連付ける方法がわかりません。次のように

編集2

コンパイル角度の関数は次のとおりです。

//A function that allows one to compule angular elements after the page loads. Typically used with ajax content. 
function compileAngularElement(elSelector, controllerID) {  
    // The new element to be added 
    if (elSelector !== null) { 
     var $div = $(elSelector); 

     // The parent of the new element 
     var $target = $("[ng-app]"); 

     angular.element($target).injector().invoke(['$compile', function ($compile) { 
      var $scope = angular.element($target).scope(); 
      //var $scope = angular.element(document.getElementById(controllerID)).scope(); 
      $compile($div)($scope); 
      // Finally, refresh the watch expressions in the new element 
      $scope.$apply(); 
     }]); 
    } 
} 

私は問題/質問が本当にドロップゾーンに関連していないことを指摘したいと思います。問題は、プレビュー要素の1つをスコープ配列の要素にどのように関連付けることができるかということです。

プレビュー要素{{FileName}}を入れてスコープ[{FileName: "cookie"}のような配列を持っている場合、{FileName: " {FileName}}の最初のプレビューで食べ物を、{{FileName}}に食べ物を記入するにはどうすればよいですか?{FileName: "foobar"}

現在のところ、{{FileName}}を入れてスコープに割り当てると、すべてのプレビューで同じファイル名が表示されます。

+0

実際に実装されたdropzone completed関数とコントローラには何がありますか? –

+0

私は多分私の悪いことは申し訳なく思っていますが、私はあなたの質問を非常によく理解できません。 AngularJSの外に出てくるものからAngularJSの中に何かを渡す方法を尋ねていますか?そして、私はAngularJSコントローラーが何であるかを見ていません – quirimmo

+0

あなたのコードによって引き起こされる問題について質問するときに、人々が問題を再現するために使用できるコードを提供すればもっと良い答えが得られます。 [、最小完全、かつ検証例を作成する方法]を参照してください(https://stackoverflow.com/help/mcve)。 – georgeawg

答えて

0

通常、Angularjsでこのようなサードパーティ要素を使用する場合は、それらをモジュールでラップしてモジュールを注入します。私はdropdown.jsに精通していないが、私はこれに対処する方法は、それがコントローラ内のメソッドになるように通信するメソッドを持っていると思うので、あなたはコントローラにアクセスすることができます。

私はこれが実装しようとしているBootstrapのドロップダウンであると仮定しています。ネイティブのブートストラップコンポーネントをAngularで使用しようとするのは一般的に推奨されていませんが、統合はしばしば非常に困難です。角チームは、ここに用意されている交換用コンポーネントのセットを作成しました:https://angular-ui.github.io/bootstrap/これが本当に当てはまる場合は、これを実際に活用することをお勧めします。

+0

[dropdown.jsホームページ](http://www.dropzonejs.com/)。 [Githubに関するFAQ](http://www.dropzonejs.com/) – georgeawg

+0

私の編集をチェックしてください。私の質問は本当にdropzone関連していません。 – SolidSnake4444

+0

ご清聴ありがとうございます。私はdropdown.jsをタイトルに見て、それに基づいて調査を中止しました。 dropzone.js angularjsの簡単なgoogleでは、これに関するいくつかの指示と、ビデオ(https://www.google.com/search?q=dropzone+js+angularjs)を公開しています。私はこの指令を見ました:https://github.com/thatisuday/ng-dropzoneそして私が上記のように提唱したようなモジュールを提供します。私はまだモジュールを使用することが行く方法だと思います。 –

関連する問題