如何将动态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/如果确实如此，我真的建议您使用它。