绑定动态HTML选择元素角度与dropzone.js

我使用dropzone.js，其中动态添加HTML内容到一个页面时，文件被删除。绑定动态HTML选择元素角度与dropzone.js

在我的情况下，动态HTML包含一个角度绑定select元素。

我需要角来刷新（并绑定）包含在动态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>

我知道选择作品，时没有动态添加，如果我把选择别的地方它是正确填充页面上。

编译方法似乎没有绑定选择？

我也试过了。

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

来源

2016-05-14 Jim

给任何有此问题的人。 $compile(element: HTMLElement)返回一个函数。

$compile的正确用法是。

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

它正确地将创建的HTML绑定到控制器作用域。

来源

2016-05-15 08:46:18 Jim

绑定动态HTML选择元素角度与dropzone.js

回答

相关问题