使用 dropzone.js 以角度绑定动态 HTML 选择元素答案

【问题标题】：binding dynamic HTML select element in angular with dropzone.js使用 dropzone.js 以角度绑定动态 HTML 选择元素
【发布时间】：2016-05-14 11:33:03
【问题描述】：

我正在使用 dropzone.js，它在删除文件时动态地将 HTML 内容添加到页面。

在我的例子中，动态 HTML 包含一个 angular 绑定 select 元素。

我需要 Angular 来刷新（和绑定）动态 HTML 中包含的选择。

我正在尝试使用$compile方法在dropzone添加后编译添加的dom元素，以便填充select。

// this directive creates the dropzone.js component, and attempts to
// compile the added dynamic HTML
export class DocumentDropZone implements ng.IDirective {
  constructor(public $log, public $compile) {
  }

  public link: Function = (scope: any, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => {
    this.$log.log('initialised drop zone.');
    var compile = this.$compile;
    var dz = new Dropzone("body",
        {
            url: 'test',
            previewTemplate: <any>$('script[type="text/template"]').html(),
            autoQueue: false, // Make sure the files aren't queued until manually added
            previewsContainer: "#previews", // Define the container to display the previews
            clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
            init: function() {
                  this.on('success', function(file, json) {
                  });

                  this.on('addedfile', function(file) {
                      // ATTEMPT TO COMPILE THE ADDED DOM ELEMENT
                      // SO THAT ANGULAR BINDS THE SELECT
                      compile($('div#template'));
                  });

                  this.on('drop', function(file) {
                  });

                }
            });
  }
}

这是模板的一部分。

<select class="form-control"             
        ng-model="documentType"
        ng-options="documentType.name for documentType in dc.documentTypes track by documentType.id">
</select>

我知道选择有效，当没有动态添加时，就像我将选择放在页面上的其他位置一样，它已正确填充。

compile方法好像没有绑定select？

我也试过了。

scope.$apply(function() {
    compile($('div#template'));
});

【问题讨论】：

标签： angularjs dropzone.js

【解决方案1】：

致有此问题的其他人。 $compile(element: HTMLElement) 返回一个函数。

$compile的正确用法是。

compile($('div#template'))(scope);

将创建的 HTML 正确绑定到控制器范围。

【讨论】：