如何将jQuery控件包装为angular指令？

Question

我想在Angular应用程序中使用此标记UI控件

https://github.com/aehlke/tag-it

如果没有Angular，您只需初始化

<script type="text/javascript">
    $(document).ready(function () {
        $("#myTags").tagit();
    });
</script>

将任何名为myTags的有序列表转换为交互式标记

<ul id="myTags">
    <li>Tag1</li>
    <li>Tag2</li>
</ul>

这是一个小小的screeshot http://screencast.com/t/vWng1BgUc1M7

问题是 - 如何将其包装以使用角度？我需要块在局部视图内。这意味着它不可用于jQuery初始化例程，因此不起作用。

我需要包含许多jQuery控件，我想了解处理它们的最佳方法。谢谢！

Answer 1

假设您在引用Angular之前在脚本标记中引用JQuery，它应该如下所示：

app.directive('tagIt', function (){
   return function(scope, elem) {
      elem.tagit();
   }
});

然后：

<ul id="myTags" tag-it> ... </ul>