0
私はdropzone.jsを使用していますが、は、ファイルをドロップすると動的にHTMLのコンテンツをページに追加します。バインディング動的HTML dropzone.jsと角度のついた要素を選択
私の場合、動的HTMLにはの角が含まれています。select
要素です。
ダイナミックHTMLに含まれている選択をリフレッシュ(およびバインド)する必要があります。
$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>
私はそれが正しく読み込まれているページ上で選択どこかに入れているかのように動的に追加されていない選択した作品、を知って。
コンパイル方法が選択をバインドしていないようですか?
私も試しました。
scope.$apply(function() {
compile($('div#template'));
});