我正在使用angularjs，flot插件处理管理页面。我正在尝试在我的仪表板内容上绘制图表。我写了这样一个指令：
.directive('ngChartDirective',function(){
return {
controller : 'chartCtrl'
};
});
这是仪表板内容中的ma div：
<div class="jarviswidget" ng-chart-directive id="wid-id-0" data-widget-togglebutton="false" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">
<!-- widget options:
usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
data-widget-colorbutton="false"
data-widget-editbutton="false"
data-widget-togglebutton="false"
data-widget-deletebutton="false"
data-widget-fullscreenbutton="false"
data-widget-custombutton="false"
data-widget-collapsed="true"
data-widget-sortable="false"
-->
<header>
<span class="widget-icon"> <i class="glyphicon glyphicon-stats txt-color-darken"></i> </span>
<h2>Live Feeds</h2>
<ul class="nav nav-tabs pull-right in" id="myTab">
<li class="active">
<a data-toggle="tab" href="#s1"><i class="fa fa-clock-o"></i> <span class="hidden-mobile hidden-tablet">Live Stats test</span></a>
</li>
<li>
<a data-toggle="tab" href="#s2"><i class="fa fa-facebook"></i> <span class="hidden-mobile hidden-tablet">Social Network test</span></a>
</li>
<li>
<a data-toggle="tab" href="#s3"><i class="fa fa-dollar"></i> <span class="hidden-mobile hidden-tablet">Revenue</span></a>
</li>
</ul>
</header>
<!-- widget div-->
<div class="no-padding">
<!-- widget edit box -->
<div class="jarviswidget-editbox">
test
</div>
<!-- end widget edit box -->
<div class="widget-body">
<!-- content -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in padding-10 no-padding-bottom" id="s1">
<div class="row no-space">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<span class="demo-liveupdate-1"> <span class="onoffswitch-title">Live switch</span> <span class="onoffswitch">
<input type="checkbox" name="start_interval" class="onoffswitch-checkbox" id="start_interval">
<label class="onoffswitch-label" for="start_interval">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span> </label> </span> </span>
<div id="updating-chart" class="chart-large txt-color-blue"></div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 show-stats">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12"> <span class="text"> My Tasks <span class="pull-right">130/200</span> </span>
<div class="progress">
<div class="progress-bar bg-color-blueDark" style="width: 65%;"></div>
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12"> <span class="text"> Transfered <span class="pull-right">440 GB</span> </span>
<div class="progress">
<div class="progress-bar bg-color-blue" style="width: 34%;"></div>
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12"> <span class="text"> Bugs Squashed<span class="pull-right">77%</span> </span>
<div class="progress">
<div class="progress-bar bg-color-blue" style="width: 77%;"></div>
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12"> <span class="text"> User Testing <span class="pull-right">7 Days</span> </span>
<div class="progress">
<div class="progress-bar bg-color-greenLight" style="width: 84%;"></div>
</div> </div>
<span class="show-stat-buttons"> <span class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <a href="javascript:void(0);" class="btn btn-default btn-block hidden-xs">Generate PDF</a> </span> <span class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <a href="javascript:void(0);" class="btn btn-default btn-block hidden-xs">Report a bug</a> </span> </span>
</div>
</div>
</div>
<div class="show-stat-microcharts">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="easy-pie-chart txt-color-orangeDark" data-percent="33" data-pie-size="50">
<span class="percent percent-sign">35</span>
</div>
<span class="easy-pie-title"> Server Load <i class="fa fa-caret-up icon-color-bad"></i> </span>
<ul class="smaller-stat hidden-sm pull-right">
<li>
<span class="label bg-color-greenLight"><i class="fa fa-caret-up"></i> 97%</span>
</li>
<li>
<span class="label bg-color-blueLight"><i class="fa fa-caret-down"></i> 44%</span>
</li>
</ul>
<div class="sparkline txt-color-greenLight hidden-sm hidden-md pull-right" data-sparkline-type="line" data-sparkline-height="33px" data-sparkline-width="70px" data-fill-color="transparent">
130, 187, 250, 257, 200, 210, 300, 270, 363, 247, 270, 363, 247
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="easy-pie-chart txt-color-greenLight" data-percent="78.9" data-pie-size="50">
<span class="percent percent-sign">78.9 </span>
</div>
<span class="easy-pie-title"> Disk Space <i class="fa fa-caret-down icon-color-good"></i></span>
<ul class="smaller-stat hidden-sm pull-right">
<li>
<span class="label bg-color-blueDark"><i class="fa fa-caret-up"></i> 76%</span>
</li>
<li>
<span class="label bg-color-blue"><i class="fa fa-caret-down"></i> 3%</span>
</li>
</ul>
<div class="sparkline txt-color-blue hidden-sm hidden-md pull-right" data-sparkline-type="line" data-sparkline-height="33px" data-sparkline-width="70px" data-fill-color="transparent">
257, 200, 210, 300, 270, 363, 130, 187, 250, 247, 270, 363, 247
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="easy-pie-chart txt-color-blue" data-percent="23" data-pie-size="50">
<span class="percent percent-sign">23 </span>
</div>
<span class="easy-pie-title"> Transfered <i class="fa fa-caret-up icon-color-good"></i></span>
<ul class="smaller-stat hidden-sm pull-right">
<li>
<span class="label bg-color-darken">10GB</span>
</li>
<li>
<span class="label bg-color-blueDark"><i class="fa fa-caret-up"></i> 10%</span>
</li>
</ul>
<div class="sparkline txt-color-darken hidden-sm hidden-md pull-right" data-sparkline-type="line" data-sparkline-height="33px" data-sparkline-width="70px" data-fill-color="transparent">
200, 210, 363, 247, 300, 270, 130, 187, 250, 257, 363, 247, 270
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="easy-pie-chart txt-color-darken" data-percent="36" data-pie-size="50">
<span class="percent degree-sign">36 <i class="fa fa-caret-up"></i></span>
</div>
<span class="easy-pie-title"> Temperature <i class="fa fa-caret-down icon-color-good"></i></span>
<ul class="smaller-stat hidden-sm pull-right">
<li>
<span class="label bg-color-red"><i class="fa fa-caret-up"></i> 124</span>
</li>
<li>
<span class="label bg-color-blue"><i class="fa fa-caret-down"></i> 40 F</span>
</li>
</ul>
<div class="sparkline txt-color-red hidden-sm hidden-md pull-right" data-sparkline-type="line" data-sparkline-height="33px" data-sparkline-width="70px" data-fill-color="transparent">
2700, 3631, 2471, 2700, 3631, 2471, 1300, 1877, 2500, 2577, 2000, 2100, 3000
</div>
</div>
</div>
</div>
<!-- end s1 tab pane -->
<div class="tab-pane fade" id="s2">
<div class="widget-body-toolbar bg-color-white">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="s123">Show From</label>
<input type="email" class="form-control input-sm" id="s123" placeholder="Show From">
</div>
<div class="form-group">
<input type="email" class="form-control input-sm" id="s124" placeholder="To">
</div>
<div class="btn-group hidden-phone pull-right">
<a class="btn dropdown-toggle btn-xs btn-default" data-toggle="dropdown"><i class="fa fa-cog"></i> More <span class="caret"> </span> </a>
<ul class="dropdown-menu pull-right">
<li>
<a href="javascript:void(0);"><i class="fa fa-file-text-alt"></i> Export to PDF</a>
</li>
<li>
<a href="javascript:void(0);"><i class="fa fa-question-sign"></i> Help</a>
</li>
</ul>
</div>
</form>
</div>
<div class="padding-10">
<div id="statsChart" class="chart-large has-legend-unique"></div>
</div>
</div>
<!-- end s2 tab pane -->
<div class="tab-pane fade" id="s3">
<div class="widget-body-toolbar bg-color-white smart-form" id="rev-toggles">
<div class="inline-group">
<label for="gra-0" class="checkbox">
<input type="checkbox" name="gra-0" id="gra-0" checked="checked">
<i></i> Target </label>
<label for="gra-1" class="checkbox">
<input type="checkbox" name="gra-1" id="gra-1" checked="checked">
<i></i> Actual </label>
<label for="gra-2" class="checkbox">
<input type="checkbox" name="gra-2" id="gra-2" checked="checked">
<i></i> Signups </label>
</div>
<div class="btn-group hidden-phone pull-right">
<a class="btn dropdown-toggle btn-xs btn-default" data-toggle="dropdown"><i class="fa fa-cog"></i> More <span class="caret"> </span> </a>
<ul class="dropdown-menu pull-right">
<li>
<a href="javascript:void(0);"><i class="fa fa-file-text-alt"></i> Export to PDF</a>
</li>
<li>
<a href="javascript:void(0);"><i class="fa fa-question-sign"></i> Help</a>
</li>
</ul>
</div>
</div>
<div class="padding-10">
<div id="flotcontainer" class="chart-large has-legend-unique"></div>
</div>
</div>
<!-- end s3 tab pane -->
</div>
<!-- end content -->
</div>
</div>
<!-- end widget div -->
</div>
和我的控制员：
.controller('chartCtrl', ['$scope', '$http', '$interval', function($scope, $http, $interval) {
$scope.request = function(){
var result;
console.log("requesting");
$http({method: 'GET', url: 'http://angularjs.khonet.com/datasource/database.php?type=chart-data'})
.then(function (response) {
result=response.data;
$scope.chartData=result;console.log('done');
});
};
$scope.firstLoad = function(callback){
$http({method: 'GET', url: 'http://angularjs.khonet.com/datasource/database.php?type=chart-data'})
.then(function (response) {
result=response.data;
$scope.chartData=result;
console.log('start callback');
callback();
});
};
$scope.startCall = function(){
$scope.inv=setInterval(function () {
$scope.$apply(function () {
$scope.request();
});
},1500);
};
$scope.endCall = function(){
clearInterval($scope.inv);
};
}])
这是我在仪表板视图中的脚本来绘制此图表：
var data = [],
totalPoints = 200,
$UpdatingChartColors = $("#updating-chart").css('color');
// setup control widget
var updateInterval = 1500;
$("#updating-chart").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
$(this).val("" + updateInterval);
}
});
// setup plot
var options = {
yaxis: {
min: 0,
max: 100
},
xaxis: {
min: 0,
max: 100
},
colors: [$UpdatingChartColors],
series: {
lines: {
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.4
}, {
opacity: 0
}]
},
steps: false
}
}
};
var plot = undefined;
var scope = angular.element($("#wid-id-0")).scope();
scope.firstLoad(function(){
var tempData = scope.chartData;
plot = $.plot($("#updating-chart"), [tempData], options);
console.log('callback end');
});
/* live switch */
$('input[type="checkbox"]#start_interval').click(function () {
if ($(this).prop('checked')) {
$on = true;
updateInterval = 1500;
scope.startCall();
update();
} else {
//var scope = angular.element($("#wid-id-0")).scope();
scope.endCall();
clearInterval(updateInterval);
$on = false;
}
});
function update() {
if ($on == true) {
//console.log('updated');
if(Array.isArray(scope.chartData)) {
plot.setData([scope.chartData]);
plot.draw();
}
setTimeout(update, updateInterval);
} else {
clearInterval(updateInterval);
}
}
var $on = false;
现在我导航到任何内容然后返回，我的控制台上出现错误：
angular.js：9778 TypeError：scope.firstLoad不是函数 at generatePageGraphs（eval at globalEval ...
范围ID已更改。老兄，我的范围在哪里???
修改 我发现当你把一个函数放在这样的控制器中时：
$scope.myfunc=function(){console.log('This is my func')};
首次加载时，如果你记录你的函数，你会看到它，但如果你从另一个视图导航回来只有函数名称，但里面的代码将是未定义的。 对不起，如果你不明白。我的英语不好
编辑2：
这是我的演示：tam.khonet.com
正如您在控制台选项卡中看到的，范围对象具有文本字段，但我无法访问scope.text。这是未定义的。有人告诉我为什么请