- 主题:问个angularjs的绑定问题(变量和数组)
以下代码,本来打算用$scope.chartdataarray, 和$scope.chartconfigarray两个数组
绑定到多个line graphs上(ng-repeat, chartconfig代表配置,chartdata代表数
据)。 这样,html template可以被多次复用。
后来发现,跑着跑着始终都会浏览器页面崩溃。 改成不用数组的方式,倒是没崩溃。
这个问题花了一周工作时间才定位到,谁能说说原因? 是angular的问题,还是用的插
件有问题(angular-echarts是对baidu echarts的封装)。
谢谢。
注释内的代码为:用数组的情况。 注释下面为不用数组的情况。
-----------------------------------------------------------
angular.module('nmsRealtime', ['angular-echarts'])
.controller('nmsRealtimeCtrl',
['$scope', '$interval', 'nmsRealtimeService',
function($scope, $interval, nmsRealtimeService) {
/*
$scope.chartconfigarray = [
compose_config_data('test', 'some test1..'),
compose_config_data('test', 'some test2..')
];
*/
$scope.chartconfig1 = compose_config_data('test', 'some tests..');
$scope.chartconfig2 = compose_config_data('test', 'some tests..');
$interval(function() {
// $scope.chartdataarray = null;
$scope.chartdata1 = null;
$scope.chartdata2 = null;
var rx_dp_array = [];
var tx_dp_array = [];
for (var i = 0; i < DP_SIZE; ++i) {
rx_dp_array.push({x: i, y: Math.random() * 300 });
tx_dp_array.push({x: i, y: Math.random() * 300 });
}
/*
$scope.chartdataarray = [
[{name: 'rxpkts/s', datapoints: rx_dp_array }],
[{name: 'txpkts/s', datapoints: tx_dp_array }]
];
*/
$scope.chartdata1 =
[{name: 'rxpkts/s', datapoints: rx_dp_array }];
$scope.chartdata2 =
[{name: 'txpkts/s', datapoints: tx_dp_array }];
}, 20 * 1000);
}])
-----------------------------------------
<ul class="runchart-list">
<!--
<li class="runchart" ng-repeat="chartdata in chartdataarray">
<div class="chart-container">
<line-chart config="chartconfigarray[$index]"
data="chartdata"></line-chart>
</div>
</li>
-->
<li class="runchart">
<div class="chart-container">
<line-chart config="chartconfig1" data="chartdata1"></line-chart>
</div>
</li>
<li class="runchart">
<div class="chart-container">
<line-chart config="chartconfig2" data="chartdata2"></line-chart>
</div>
</li>
</ul>
--
修改:saynothing FROM 115.199.250.*
FROM 115.199.250.*
昨天看了下,angular-echart的问题。这个插件是对baidu echart的封装
唉,这个坑、坑了我一周时间。 angular-echar虽然只有1000行代码,看不懂呀。
angular得好好学学
-------------------------------------------------------
再咨询一个问题:
不用angular封装的方式,而是native的方式:
// 构造多个line graphs
<div ng-controller="myCtrl"
<div class="line-graph" id="{{ chart.name }}"
ng-repeat="for chart in chart_array">
</div>
</div>
能否做到:
(1) myCtrl里面控制html dom
$scope.chart_array = [ {name: "rxpts/sec", option: {...}},
{name: "txpts/sec", option: {...}}
];
(2) html dom生成之后,条用primitive方法:
for (var i = 0; i < $scope.chart_array.length; ++i) {
var chart = document.getElementById($scope.chart_array[i].name);
var myChart = echarts.init(chart);
// 配置line graph和数据
myChart.setOption($scope.chart_array[i].option);
}
angular原理不明白,希望高手指教。
--
FROM 107.178.194.*
Angular directive都能解决吗?
--
FROM 107.178.194.*
Angular1.*是有这样的特点:数据量大会有问题,主要原因是模板太重,要不用vue这类轻模板的,要不试试Ng2
【 在 saynothing 的大作中提到: 】
: 以下代码,本来打算用$scope.chartdataarray, 和$scope.chartconfigarray两个数组
: 绑定到多个line graphs上(ng-repeat, chartconfig代表配置,chartdata代表数
: 据)。 这样,html template可以被多次复用。
: ...................
--
修改:dhcn FROM 61.49.238.*
FROM 61.49.238.*
数量大以后出问题,就是因为指令太多,模板太重。
【 在 saynothing 的大作中提到: 】
: Angular directive都能解决吗?
--
FROM 61.49.238.*
<div id="nms-realtime" ng-app="nmsRealtime" ng-controller="nmsRealtimeCtrl">
<ul class="runchart-list">
<li class="runchart" ng-repeat="chart in chartArray"
linechart="chart">
</li>
</ul>
</div>
controller $interval更新、调用REST获取数据、显示多个线图。 directive的link阶
段,调用REST、显示线图。 昨天写了一个测试,很容易就通过。 今天才发现,link调
用REST,$interval调用REST,偏偏又是异步的,写起来头都大了。
唉,定位问题花了4天,找到解决方案花了1天,修改又要花2天。
【 在 dhcn (小石) 的大作中提到: 】
: Angular1.*是有这样的特点:数据量大会有问题,主要原因是模板太重,要不用vue这
类轻模板的,要不试试Ng2
--
FROM 107.178.194.*
花2-3个周末的时间阅读分析一次源码。提供一个概观认知,给自己壮壮胆。
我用ng1的时候,官网是被墙掉的,文档只能看国内copy的静态镜像,error tip都没地方看去。
【 在 saynothing 的大作中提到: 】
: <div id="nms-realtime" ng-app="nmsRealtime" ng-controller="nmsRealtimeCtrl">
: <ul class="runchart-list">
: <li class="runchart" ng-repeat="chart in chartArray"
: ...................
--
修改:dhcn FROM 111.196.1.*
FROM 111.196.1.*