jQuery插件中的Angular指令不起作用

Angular directive within jQuery plugin does not work

本文关键字：指令 不起作用 Angular 插件 jQuery      更新时间：2023-09-26

我有一个使用自定义jQuery插件的指令，该插件返回模板html以显示一些列表并且效果很好，但是当我尝试在该模板中使用AngularJs指令时，例如" ng-click"或我的自定义指令之一，它只是没有拾取它。

当我在 firebug 或 chrome 调试器工具中打开源代码时，我可以看到没有附加到该div 的 class="ng-scope"，这通常是正确工作的角度控制div 的情况。但是我看到这个div 在主 ng-appdiv 下处于层次结构中，所以我认为它必须继承给所有子div。

同样，这个控制器和指令有效，唯一不起作用的部分是我从 jQuery 插件内部添加到结果模板中的 ng-click。任何想法这里有什么问题？

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>

对于动态生成的 HTML，您需要使用像 $compile(element)(scope); 这样的$compile服务来使其被 angular 识别。

如果插件正在生成 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对象。

相关文章：