如何与AngularJS集成

Question

我是Angular和Flot的新手，但在JQuery和JavaScript中经验丰富。我对如何将动物图表结合到角度数据模型的方式有些困惑，因为Flot是一个jQuery插件。我已经四处搜索，但找不到一个例子。

我也很乐意使用Highcharts，Google-Charts或任何其他图表解决方案。

Answer 1

由于图表涉及重型DOM操纵，因此指令是必经之路。

数据可以保存在控制器中

App.controller('Ctrl', function($scope) {
    $scope.data = [[[0, 1], [1, 5], [2, 2]]];
});

您可以创建一个自定义的HTML TAG1，指定要从

获取数据的模型

 <chart ng-model='data'></chart>

哪个角可以通过指令进行编译

App.directive('chart', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $.plot(elem, data, {});
            elem.show();
        }
    };
});

示例在这里。

对于大多数修改DOM。

的插件而言，此过程相似

- * -

另外，您可以注意图表基础数据的更改并重新绘制它，因此您可以通过控制器从$ HTTP服务中获取数据并自动更新视图。这可以通过在指令定义对象中修改链接函数来实现。

   var chart = null,
       opts  = { };
    scope.$watch(attrs.ngModel, function(v){
        if(!chart){
            chart = $.plot(elem, v , opts);
            elem.show();
        }else{
            chart.setData(v);
            chart.setupGrid();
            chart.draw();
        }
    });

请注意，在指令中使用FLOT的API来实现我们想要的。

在这里完整的示例

---

1也可以是一个属性。

Answer 2

要使用gquery插件与gangularjs，您必须将它们包裹在指令中，您可以通过阅读Angularui指令的源代码：https：//github来找到一些jQuery插件指令的景象。com/angular-ui/angular-ui/tree/tree/master/modules/Dicctionlives