Question

为什么这对我不起作用？基于这个问题How to Integrate Flot with AngularJS?

我得到的只是一个空白页。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="static/js/angular/angular.min.js"></script>
    <script type="text/javascript" src="static/js/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="static/js/jquery/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="static/lib/flot/controller.js"></script>
    <style type='text/css'>
       chart {
            display:none;
            width:400px;
            height:200px;
        }
   </style>
 </head>
 <body>
    <div ng-app='App'>
        <div ng-controller='Ctrl'>
            <chart ng-model='data'></chart>
        </div>
    </div>    
  </body>
</html>


#Controller.js
var App = angular.module('App', []);

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

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

Answer 1

您按错误的顺序包含了脚本。应该是jQuery，Flot，然后是angular（接下来是你的控制器）：

<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="flot@*" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>

这是一个掠夺者：http://plnkr.co/edit/WI3lXKRxxEpPvnhHfgrf?p=preview

试图让简单的flot和角度查询基于其他SO帖子工作

1 个答案: