Question

我是AngularJs的新手。我有一个jquery代码，我打算创建一个AngularJs指令。如何将jquery代码包装在AngularJs指令中。我只想使用相同的jquery代码，但想通过AngularJs指令调用代码。如果AngularJs有可能，请告诉我？

我正在使用两个jquery部分更新帖子，我打算创建一个指令：

     $('#pie-chart1').highcharts({
       title: {
       text: 'Exporting module is loaded but buttons are disabled'
       },
       xAxis: {
         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
       },

       series: [{
       data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
      }],

      navigation: {
        buttonOptions: {
        enabled: false
      }
    }
  });

Answer 1

有可能，但当然没有银弹。有一些jquery东西很容易移植到有角度，有一些更难。一般来说，你可以做任何事情，但难度可以有所不同。

编辑：在开始做你正在做的事情之前，你可能想看看这个：

https://github.com/pablojim/highcharts-ng

你想要实现的目标已经实现，所以我建议你不要重新发明轮子或使用他们的指令或至少以它作为起点。

Answer 2

在指令中，您可以使用jQuery。实际上，如果你在Angular.js之前加载了jQuery，那么传递给链接函数的element已经是一个jQuery对象了。

app.directive("myDirective", function() {
    return {
        link: function(scope, element) {
            element.addClass("jquery"); // or other jQuery code
        }
    };
});

请注意，如果在Angular.js之前未加载jQuery，则该元素将包装在jqLite中，jqLite是Angular.js附带的jQuery的一个子集。

编辑2014年8月8日：

在你的问题中，我看到你正在使用Highcharts。这个编辑现在可能已经晚了一点，但是作为一个使用指令中的Highcharts的小应用程序，可能会给你一些额外的见解：https://bitbucket.org/mingos/pi-approximations

为jquery代码创建angularJs指令

2 个答案: