如何將動態AJAX內容綁定到具有雙向模型綁定的數組中-anguljarjs

Question

我正在使用dropzone.js將圖像上傳到我的應用程序。我希望生成的預覽與angularjs兼容，以便我可以基於範圍變量對圖像進行處理。我要上傳的每張圖片都要插入到主照片數組中，並將照片預覽元素中的所有內容映射到照片數組中的對象。

我掛鉤到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(); 
     }]); 
    } 
} 

我想指出，這個問題/問題是沒有真正涉及到懸浮窗。問題是如何將預覽元素之一與作用域數組中的元素相關聯。如果我放入預覽元素{{FileName}}，然後在範圍[{FileName：「cookie」}，{FileName：「}上有一個類似於這樣的數組，食物「}，{FileName：」foobar「}]，我如何獲得cookie以在第一個預覽中填寫{{FileName}}，並在第二個{{FileName}}中填充食物。現在，如果我把{{FileName}}並將其分配給作用域，每個預覽都將顯示相同的文件名。

Answer 1

通常當你要使用Angularjs這樣的第三方元素時，你會將它們包裝在模塊中並注入模塊。我不熟悉dropdown.js，但我認爲處理這個問題的方法是讓它與之通信的方法成爲控制器中的一種方法，以便在其中可以訪問控制器。

我假設這是您嘗試實施的Bootstrap的下拉菜單。通常不建議嘗試在Angular上使用本地引導組件，並且集成通常非常具有挑戰性。角色團隊已經爲這些創建了一整套替換組件：https://angular-ui.github.io/bootstrap/如果確實如此，我真的建議您使用它。