バインディング動的HTML dropzone.jsと角度のついた要素を選択

Question

私はdropzone.jsを使用していますが、は、ファイルをドロップすると動的にHTMLのコンテンツをページに追加します。

私の場合、動的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')); 
}); 

Answer 1

この問題が発生している他の人には。 $compile(element: HTMLElement)は関数を返します。

$compileの正しい使い方です。

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

これは、作成されたHTMLをコントローラスコープに正しくバインドします。