綁定動態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

回答

相關問題