どのように動的AJAXコンテンツを双方向モデルバインディングの配列にフックします-anguljarjs

Question

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

私は、ファイルを追加するために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}}を入れてスコープに割り当てると、すべてのプレビューで同じファイル名が表示されます。

Answer 1

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

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