我有一个ng-repeat工作正常,当我选择一个项目时动态添加项目到列表。它正确打印值。但是当我添加一个指令(具有隔离范围)时,它只打印第一个项目的详细信息。
html的
<div class="wrapper wrapper-content" ng-controller="ngDygraphCtrl">
<div class="col-sm-3 pull-right" >
<br></br>
<label>Add Graphs</label>
<select ng-options="size as size.name for size in graphsx " ng-model="selected" ng-change="addGraph()"></select>
</div>
<div ng-repeat="chart1 in chartsx track by $index" >
<br/>
{{chart1.size}}-{{chart1.name}} {{$index}}
<div class="row" >
<div class="{{chart1.size}}">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Line Chart {{chart1.size}}-{{chart1.name}} {{$index}}</h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<div class="dynamic-chart">
<ng-dygraphs style="height:350px;" data="graph.data" options="graph.options" legend="graph.legend" > </ng-dygraphs>
</div>
</div>
</div>
</div>
</div>
</div>
这项工作罚款,如果我注释掉ng-dygraphs ,它会打印name1,name2等。
我很确定隔离范围会导致一些问题,但我不知道如何解决它。
.controller:
.controller('ngDygraphCtrl', function ($scope, $http, $timeout, $modal, $interval) {
$scope.graph = {
data: [ "X"
],
options: {
axisLineColor: "#FFFFFF",
drawPoints: true,
pointSize : 1,
strokeWidth : 0.5,
connectSeparatedPoints: true,
axes: {
x: {
valueFormatter: Dygraph.dateString_,
axisLabelFormatter: Dygraph.dateAxisFormatter,
ticker: Dygraph.dateTicker
}
},
colors : ["#ffff00", "#FF3300", "#7920FF", "#ff0000", "#ff00ff"]
} ,
legend: {
}
};
$scope.chartsx = [];
$scope.graphsx = [];
$scope.graphsx = [{name: "name1", size: "col-lg-12"}, {name: "name2", size: "col-lg-6"}]
// Get User state
$scope.addGraph = function() {
var sel = $scope.selected.name;
for ( var ss in $scope.graphsx) {
if ( $scope.graphsx[ss].name == sel ) {
$scope.chartsx.push($scope.graphsx[ss]);
// $scope.charts.push({name: sel, size: "col-sm-6"});
}
}
}
$scope.getData = function() { $http.get('http://localhost:8080/getDygraphData?q=' + queries)
.success(function(data) {
$scope.graph.data = data;
}).error(function (data, status){
console.log("Error status : " + status + " " + data);
}) };
var promise = $ interval($ scope.getData,3000); }
指令:链接到ng-dygraph指令(此处发布太大)
答案 0 :(得分:0)
正如@NewDev所暗示的,最可能的罪魁祸首是声明:
<ng-dygraphs style="height:350px;" data="graph.data" options="graph.options" legend="graph.legend" > </ng-dygraphs>
具体来说,您正在使用似乎不存在的对象图形创建指令。您的图表范围没有定义变量。
我假设您复制了here中的代码,但您需要传递给数据,选项和图例的内容是在您的范围内定义的值。
这有意义吗?