我有一个使用自定义的jQuery插件指令，该插件返回HTML模板显示一些列表和它的工作好 BUT 当我尝试也使用该模板里面的 AngularJs指令类似NG单击我的或定制的指令之一，它只是不把它捡起来。

当我在Firebug或Chrome调试工具打开源，我可以看到没有课=NG-范围追加到该div通常是在正常工作角度控制的div的情况。但是，我看到这个分区是hiearchialy在主NG-应用分区，所以我想它必须被继承到所有孩子的div。

再次：此控制器和指导工作，唯一的不工作部分是在 NG-点击这是我加入导致的jQuery插件里面的模板。任何想法这里的问题？

  myApp.directive（myDirective功能（）{  返回{    限制：'A'，    链接：功能（范围，元素，ATTRS）{        $（元素）.selectAutoComplete（{            dataSourceDelegate：scope.dataSource1，            dataSourceObject：{值：ID，显示：标题}，            resultTemplate：'＆LT; D​​IV＆gt;显示了一些数据表＆LT; / DIV＆GT; ＆LT; D​​IV ID =internalTemplate                                NG-点击=DoSomething的（）＆GT;显示下一页＆LT; / DIV＆GT;'        }）;    }  }}）; 

和在HTML

 ＆LT; D​​IV NG控制器=myController的＆GT;            ＆LT;输入我的-指令类型=文本/＆GT;        ＆LT; / DIV＆GT; 

解决方案

有关动态生成HTML，你需要使用像 $的$编译服务编译（元）（范围）; 来得到它的角认可。

如果该插件生成HTML它更困难。在我的经验中最复杂的插件都有自己的API，其中包括一个或回调的方式来通知您，当他们准备好了。我想看看插件文档，看看是否有一种方法可以做到这一点（或者改变它的来源自己，如果不这样做）。

  myApp.directive（myDirective功能（编译$，$超时）{返回{限制：'A'，链接：功能（范围，元素，ATTRS）{    $（元素）.selectAutoComplete（{        dataSourceDelegate：scope.dataSource1，        dataSourceObject：{值：ID，显示：标题}，        resultTemplate：'＆LT; D​​IV＆gt;显示了一些数据表＆LT; / DIV＆GT; ＆LT; D​​IV ID =internalTemplate                            NG-点击=DoSomething的（）＆GT;显示下一页＆LT; / DIV＆GT;'    }）;    //例如什么插件回调的可能是像 - 检查他们的文档    element.selectAutoComplete（完了，函数（）{        $编译（元）（范围）;    }）;    //如果没有，使用$超时是一个备用，将大部分工作，但不理想    $超时（函数（）{        //等待插件来完成...        $编译（元）（范围）;    }，2000）;}}}）; 

BTW，你不需要做 $（元素）为元素已经是一个jQuery对象呢

I have a directive which uses a custom jQuery Plugin, The plugin returns template html to show some list and it works good, BUT when I try to also use an AngularJs directive inside that template something like "ng-click" or one of my custom directives it just does not pick it up.

When I open the source in firebug or chrome debugger tools I can see there is no class="ng-scope" appended to that div which usually is the case in correctly working angular controlled divs. But I see this div is in hiearchialy under the main ng-app div, so I thought it must be inherited to all child divs.

Again This controller and directive works, the only NOT working part is the ng-click which I added to result template from inside the jQuery plugin. Any ideas what is the problem here?

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>'
        });
    }
  }
});

and in Html

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

For dynamically generated HTML you need to use the $compile service like $compile(element)(scope); to get it recognised by angular.

It's more difficult if the plugin is generating the HTML. In my experience most complex plugins have their own API that includes a callback or way to notify you when they're ready. I'd have a look at the plugin docs and see if there's a way to do this (or change it's source to do it yourself if not).

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);
}
}
});

BTW, you don't need to do $(element) as element is already a jquery object anyway.