将 angular 中的动态 HTML select 元素与 dropzone.js 绑定

Question

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

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

我需要angular刷新（并绑定）动态HTML中包含的select。

我正在尝试使用 $compile 方法编译添加的 dom 元素，这些元素是通过 dropzone 添加的，因此 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>

我 知道 select 有效， 在没有动态添加时就好像我把 select 放在页面的其他地方一样，它被正确填充了。

编译方法好像没有绑定select?

我也试过了

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

Answer 1

对于遇到此问题的任何其他人。 $compile(element: HTMLElement) returns 一个函数。

$compile的正确用法是。

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

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

将 angular 中的动态 HTML select 元素与 dropzone.js 绑定

binding dynamic HTML select element in angular with dropzone.js

angularjs

dropzone.js