Угловая директива в JQuery плагин не работает

Question

У меня есть директива, которая использует пользовательский JQuery плагин, плагин возвращает шаблон HTML, чтобы показать некоторые список и работает хорошо, НО когда я пытаюсь использовать также AngularJs директива внутри этого шаблона что-то вроде «ng-click» или одна из моих пользовательских директив, которую он просто не подбирает.

Когда я открываю источник в инструментах отладчика firebug или chrome, я вижу, что к этому div не добавляется класс = "ng-scope", который обычно имеет место при правильной работе угловых управляемых div. Но я вижу, что этот div находится в hiearchialy под основным ng-app div, поэтому я думал, что он должен быть унаследован всем дочерним div.

Опять Этот контроллер и директива работает, только НЕ рабочая часть является нг нажмите, которые я добавил в результате шаблон из внутри плагина JQuery. Какие-нибудь идеи в чем проблема?

myApp.directive("myDirective", function(){ 
    return{ 
    restrict: 'A', 
    link: function(scope, element,attrs) { 

     $(element).selectAutoComplete({ 
      dataSourceDelegate: scope.dataSource1, 
      dataSourceObject: { value: "id", display: "title"}, 
      resultTemplate: '<div>show some data as list</div> <div id="internalTemplate" 
           ng-click="doSomething()"> Show Next </div>' 
     }); 
    } 
    } 
}); 

и в Html

<div ng-controller="myController"> 
      <input my-directive type="text" /> 
     </div> 

Answer 1

Для динамически генерируемого HTML вам нужно использовать службу $ компиляции, как $compile(element)(scope);, чтобы получить его признание угловой.

Это сложнее, если плагин генерирует HTML. По моему опыту, большинство сложных плагинов имеют свой собственный API, который включает обратный вызов или способ уведомить вас, когда они будут готовы. Я бы посмотрел документы плагина и посмотрел, есть ли способ сделать это (или изменить его источник, чтобы сделать это самостоятельно, если нет).

myApp.directive("myDirective", function($compile, $timeout){ 
return{ 
restrict: 'A', 
link: function(scope, element,attrs) { 

    $(element).selectAutoComplete({ 
     dataSourceDelegate: scope.dataSource1, 
     dataSourceObject: { value: "id", display: "title"}, 
     resultTemplate: '<div>show some data as list</div> <div id="internalTemplate" 
          ng-click="doSomething()"> Show Next </div>' 
    }); 

    // example of what plugin callback could be like - check their docs 
    element.selectAutoComplete("finished", function() { 
     $compile(element)(scope); 
    }); 

    // if not, using $timeout is a fallback that will mostly work but not ideal 
    $timeout(function() { 
     // wait for plugin to complete... 
     $compile(element)(scope); 
    }, 2000); 
} 
} 
}); 

Кстати, вам не нужно делать $(element), как element уже объект JQuery в любом случае.