2

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

当我在 firebug 或 chrome 调试器工具中打开源代码时，我可以看到没有 class="ng-scope" 附加到该 div，这通常是正确工作的角度控制 div 的情况。但是我看到这个 div 在主要的 ng-app div 下的 hiearchialy 中，所以我认为它必须继承给所有子 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>
4

1 回答 1

2

对于动态生成的 HTML，您需要使用 $compile 服务$compile(element)(scope);来让 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 对象。

于 2013-09-06T11:03:54.640 回答