如何使用AngularJS整合海军报？(How to Integrate Flot with Ang

我是新来的角和海军报，但我用jQuery和Javascript经验。我有点困惑如何去结合FLOT图表角度的数据模型，因为海军报是一个jQuery插件。我四处搜寻，但一直没能找到一个例子。

我也很乐意使用highcharts，谷歌，图表或任何其他图表解决方案。

Answer 1:

由于图表涉及重DOM操作，指令是要走的路。

数据可以保存在控制器

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

你可以创建自定义HTML标记1 ，指定你想从数据模型

 <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();
        }
    });

注意指令中海军报的API的使用情况，以达到我们想要的。

在这里，完整的例子

1可以是一个属性了。

Answer 2:

：使用jQuery插件与angularJS，你要包起来的指令，你可以通过阅读angularUI指令的源代码中找到jQuery插件指令的一些exemples https://github.com/angular-ui/angular-ui/tree /主/模块/指令