如何將jQuery控件包裝為角度指令？

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>

這是一個小片段http://screencast.com/t/vWng1BgUc1M7

問題是-如何包裝它以便與angular一起使用？ 我需要將塊放在局部視圖中。 這意味着它不適用於jQuery初始化例程，因此不起作用。

我有許多需要包裝的jQuery控件，我想了解處理它們的最佳方法。 謝謝！

Answer 1

假設您在引用Angular 之前先在腳本標簽中引用JQuery，則它應該很簡單：

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

然后：

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