Angularjs我无法将控制器中的数据显示为指令
我有用角JS制作的图表。我有两个指令，第一个名为线性图1的指令用于单个图形，第二个名为线性图的指令用于编译第一个图形中的每个图形。我的问题是，我无法访问从线性图1到线性图的控制器和范围。我将如何访问控制器和作用域 我的控制器代码：Angularjs我无法将控制器中的数据显示为指令,angularjs,using-directives,scopes,ng-controller,Angularjs,Using Directives,Scopes,Ng Controller,我有用角JS制作的图表。我有两个指令，第一个名为线性图1的指令用于单个图形，第二个名为线性图的指令用于编译第一个图形中的每个图形。我的问题是，我无法访问从线性图1到线性图的控制器和范围。我将如何访问控制器和作用域 我的控制器代码： app.controller('GraphLineController', ['$scope', '$interval', function ($scope, $interval) { $scope.graphLine = [{
app.controller('GraphLineController', ['$scope', '$interval', function ($scope, $interval) {
$scope.graphLine = [{
"label1": 'PC-1',
"name": 'PC-1',
"cpu": [
{ i: 0, util: 100 },
{ i: 1, util: 20 },
{ i: 2, util: 100 },
{ i: 3, util: 30 },
{ i: 4, util: 40 },
{ i: 5, util: 60 },
{ i: 6, util: 80 },
{ i: 7, util: 90 },
{ i: 8, util: 100 },
{ i: 9, util: 10 }],
"mem": [90, 90, 90, 90, 90, 90, 90, 90, 90, 90],
"color": "#FF4C4B"
}, {
"label2": 'PC-2',
"name": 'PC-2',
"cpu": [
{ i: 0, util: 50 },
{ i: 1, util: 90 },
{ i: 2, util: 10 },
{ i: 3, util: 40 },
{ i: 4, util: 100 },
{ i: 5, util: 20 },
{ i: 6, util: 70 },
{ i: 7, util: 90 },
{ i: 8, util: 60 },
{ i: 9, util: 30 }],
"mem": [80, 80, 80, 80, 80, 80, 80, 80, 80, 80],
"color": "#586FFF"
}, {
"label3": 'PC-3',
"name": 'PC-3',
"cpu": [
{ i: 0, util: 40 },
{ i: 1, util: 10 },
{ i: 2, util: 60 },
{ i: 3, util: 90 },
{ i: 4, util: 30 },
{ i: 5, util: 50 },
{ i: 6, util: 70 },
{ i: 7, util: 20 },
{ i: 8, util: 80 },
{ i: 9, util: 100 }],
"mem": [70, 70, 70, 70, 70, 70, 70, 70, 70, 70],
"color": "#E8C750"
}, {
"label4": 'PC-4',
"name": 'PC-4',
"cpu": [
{ i: 0, util: 30 },
{ i: 1, util: 50 },
{ i: 2, util: 90 },
{ i: 3, util: 70 },
{ i: 4, util: 80 },
{ i: 5, util: 60 },
{ i: 6, util: 40 },
{ i: 7, util: 20 },
{ i: 8, util: 100 },
{ i: 9, util: 10 }],
"mem": [60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
"color": "#59A36A"
}];
$scope.checkboxes = function(){
d3.selectAll('.nvd3.nv-legend g');
};
$scope.Line = angular.copy($scope.graphLine);
$scope.checkboxes = function () {
$scope.name = [];
};
$scope.onchange = function () {
$scope.Line = [];
angular.forEach($scope.graphLine, function (i, util) {
if ($scope.checkboxes[value.cpu]) $scope.Line.push(value);
})
}
$interval(function () {
$scope.graphLine[0].cpu.shift();
$scope.graphLine[1].cpu.shift();
$scope.graphLine[2].cpu.shift();
$scope.graphLine[3].cpu.shift();
angular.forEach($scope.graphLine[0].cpu, function (item) {
item.i--;
});
angular.forEach($scope.graphLine[1].cpu, function (item) {
item.i--;
});
angular.forEach($scope.graphLine[2].cpu, function (item) {
item.i--;
});
angular.forEach($scope.graphLine[3].cpu, function (item) {
item.i--;
});
$scope.graphLine[0].cpu.push({ i: $scope.graphLine[0].cpu.length, util: Math.random() * 100 });
$scope.graphLine[1].cpu.push({ i: $scope.graphLine[1].cpu.length, util: Math.random() * 100 });
$scope.graphLine[2].cpu.push({ i: $scope.graphLine[2].cpu.length, util: Math.random() * 100 });
$scope.graphLine[3].cpu.push({ i: $scope.graphLine[3].cpu.length, util: Math.random() * 100 });
}, 1000)
}]);
app.directive('linearChart1', function ($parse, $window, $interval) {
return {
restrict: 'EA',
scope: {
name: '=',
cpu: '=',
mem: '=',
color: '=',
graphLine: '='
},
template: "<svg width='1100' height='200'></svg>"+
'{{graphLine.name}}{{graphLine.cpu}}{{graphLine.mem}}{{graphLine.color}}',
link: function (scope, elem, attrs) {
scope.graphLine = graphLine;
var graphLine = ["name", "cpu", "mem", "color"];
console.log(graphLine);
var padding = 18;
var pathClass = "path";
var xScale, yScale, xAxisGen, yAxisGen, lineFun;
var d3 = $window.d3;
var rawSvg = elem.find('svg');
var svg = d3.select(rawSvg[0]);
//$interval(function () {
// setRandomValues(graphLine);
// redrawLineChart();
//}, 1000, 1000);
//scope.$watchCollection(exp, function (i, util) {
// GraphLineToPlot = util;
// data2 - util;
// redrawLineChart();
//});
function setChartParameters() {
var xMaximumPlot = 5;
var yMaximumPlot = 100;
xScale = d3.scale.linear()
.domain([0, xMaximumPlot])
.range([padding + 5, rawSvg.attr("width") - padding]);
yScale = d3.scale.linear()
.domain([0, yMaximumPlot])
.range([rawSvg.attr("height") - padding, 0]);
xAxisGen = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10);
yAxisGen = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
lineFun = d3.svg.line()
.x(function (d) {
return xScale(d.i);
})
.y(function (d) {
return yScale(d.util);
})
.interpolate("linear");
}
function drawLineChart() {
setChartParameters();
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0,180)")
.call(xAxisGen);
svg.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(20,0)")
.call(yAxisGen);
//svg.append("svg:path")
// .attr({
// d: linefun(scope.cpu),
// "name": scope.name,
// "stroke": scope.color,
// "stroke-width": 2,
// "fill": "none",
// "class": pathclass
// });
}
function redrawLineChart() {
setChartParameters();
svg.selectAll("g.y.axis").call(yAxisGen);
svg.selectAll("g.x.axis").call(xAxisGen);
}
//svg.select(".path").attr({
// d: lineFun(scope.cpu),
// "stroke": scope.color,
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
//});
$interval(function () {
redrawLineChart();
}, 1000);
drawLineChart();
}
};
});
app.directive('linearChart', function ($parse, $window, $interval) {
return {
restrict: 'EA',
scope: {
name: '=',
color: '=',
cpu: '=',
mem: '='
},
template: "<svg width='1050' height='200'></svg>",
link: function (scope, elem, attrs) {
//var exp = $parse(attrs.chartData);
var padding = 18;
var pathClass = "path";
var xScale, yScale, xAxisGen, yAxisGen, lineFun;
var d3 = $window.d3;
var rawSvg = elem.find('svg');
var svg = d3.select(rawSvg[0]);
//$interval(function () {
//setRandomValues(graphLine);
//redrawLineChart();
//}, 1000, 1000);
function setChartParameters() {
var xMaximumPlot = 5;
var yMaximumPlot = 100;
xScale = d3.scale.linear()
.domain([0, xMaximumPlot])
.range([padding + 5, rawSvg.attr("width") - padding]);
yScale = d3.scale.linear()
.domain([0, yMaximumPlot])
.range([rawSvg.attr("height") - padding, 0]);
xAxisGen = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10);
yAxisGen = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
lineFun = d3.svg.line()
.x(function (d) {
return xScale(d.i);
})
.y(function (d) {
return yScale(d.util);
})
.interpolate("basis");
}
function drawLineChart() {
setChartParameters();
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0,180)")
.call(xAxisGen);
svg.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(20,0)")
.call(yAxisGen);
svg.append("svg:path")
.attr({
d: lineFun(scope.cpu),
"name": scope.name,
"stroke": scope.color,
"stroke-width": 2,
"fill": "none",
"class": pathClass
});
//svg.append("svg:path")
// .attr({
// d: lineFun(scope.cpu),
// "name": scope.name,
// "stroke": "#586FFF",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
// });
//svg.append("svg:path")
// .attr({
// d: lineFun(scope.cpu),
// "name": scope.name,
// "stroke": "#E8C750",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass,
// });
//svg.append("svg:path")
// .attr({
// d: lineFun(scope.cpu),
// "name": scope.name,
// "stroke": "#59A36A",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
// });
}
function redrawLineChart() {
setChartParameters();
svg.selectAll("g.y.axis").call(yAxisGen);
svg.selectAll("g.x.axis").call(xAxisGen);
svg.select(".path").attr({
d: lineFun(scope.cpu),
"stroke": scope.color,
"stroke-width": 2,
"fill": "none",
"class": pathClass
});
//svg.select(".path").attr({
// d: lineFun(scope.cpu),
// "stroke": "#586FFF",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
//});
//svg.select(".path").attr({
// d: lineFun(scope.cpu),
// "stroke": "#E8C750",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
//});
//svg.select(".path").attr({
// d: lineFun(scope.cpu),
// "stroke": "#59A36A",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
//});
}
$interval(function () {
redrawLineChart();
}, 1000);
drawLineChart();
}
};
});
app.directive（'linearChart1'，函数（$parse，$window，$interval）{
返回{
限制：“EA”，
范围：{
名称：'='，
cpu:“=”，
mem:“=”，
颜色：'='，
图线：'='
},
模板：“”+
{{graphLine.name}{{graphLine.cpu}{{graphLine.mem}}{{graphLine.color}}，
链接：功能（范围、要素、属性）{
scope.graphLine=graphLine；
var graphLine=[“名称”、“cpu”、“内存”、“颜色”]；
console.log（graphLine）；
var=18；
var pathClass=“path”；
var xScale、yScale、xAxisGen、yAxisGen、lineFun；
变量d3=$window.d3；
var rawSvg=elem.find（'svg'）；
var svg=d3.select（rawSvg[0]）；
//$interval（函数（）{
//SetRandomValue（graphLine）；
//重新绘制线条图（）；
//}, 1000, 1000);
//作用域$watchCollection（exp，function（i，util）{
//GraphLineToPlot=util；
//data2-util；
//重新绘制线条图（）；
//});
函数setChartParameters（）{
var xMaximumPlot=5；
var yMaximumPlot=100；
xScale=d3.scale.linear（）
.domain（[0，xMaximumPlot]）
.range（[padding+5，rawSvg.attr（“width”）-padding]）；
yScale=d3.scale.linear（）
.domain（[0，yMaximumPlot]）
.range（[rawSvg.attr（“height”）-padding，0]）；
xAxisGen=d3.svg.axis（）
.scale（xScale）
.orient（“底部”）
.蜱（10）；
yAxisGen=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）
.蜱（5）；
lineFun=d3.svg.line（）
.x（功能（d）{
返回X刻度（d.i）；
})
.y（功能（d）{
返回yScale（d.util）；
})
.插入（“线性”）；
}
函数drawLineChart（）{
setChartParameters（）；
append（“svg:g”）
.attr（“类”、“x轴”）
.attr（“转换”、“翻译（0180）”）
.呼叫（XaxiGen）；
append（“svg:g”）
.attr（“类”、“y轴”）
.attr（“转换”、“翻译（20,0）”）
.呼叫（亚西根）；
//append（“svg:path”）
//艾特先生({
//d:linefun（scope.cpu），
//“名称”：scope.name，
//“笔划”：scope.color，
//“笔划宽度”：2，
//“填充”：“无”，
//“类”：路径类
// });
}
函数重绘线形图（）{
setChartParameters（）；
svg.selectAll（“g.y.axis”）.call（yAxisGen）；
svg.selectAll（“g.x.axis”）.call（xAxisGen）；
}
//svg.select（“.path”）.attr({
//d:lineFun（scope.cpu），
//“笔划”：scope.color，
//“笔划宽度”：2，
//“填充”：“无”，
//“类”：路径类
//});
$interval（函数（）{
重新绘制线条图（）；
}, 1000);
绘图线图（）；
}
};
});
app.directive（'linearChart'，function（$parse，$window，$interval）{
返回{
限制：“EA”，
范围：{
名称：'='，
颜色：'='，
cpu:“=”，
成员：'='
},
模板：“”，
链接：功能（范围、要素、属性）{
//var exp=$parse（attrs.chartData）；
var=18；
var pathClass=“path”；
var xScale、yScale、xAxisGen、yAxisGen、lineFun；
变量d3=$window.d3；
var rawSvg=elem.find（'svg'）；
var svg=d3.select（rawSvg[0]）；
//$interval（函数（）{
//SetRandomValue（graphLine）；
//重新绘制线条图（）；
//}, 1000, 1000);
函数setChartParameters（）{
var xMaximumPlot=5；
var yMaximumPlot=100；
xScale=d3.scale.linear（）
.domain（[0，xMaximumPlot]）
.range（[padding+5，rawSvg.attr（“width”）-padding]）；
yScale=d3.scale.linear（）
.domain（[0，yMaximumPlot]）
.range（[rawSvg.attr（“height”）-padding，0]）；
xAxisGen=d3.svg.axis（）
.scale（xScale）
.orient（“底部”）
.蜱（10）；
yAxisGen=d3.svg.axis（）
规模