我有一个页面，当点击加号按钮时，标签箱应该增加一行和投票。例如，当我有51票时，理货箱应该显示10个盒子和1行。在我的网页上添加投票工作正常，51票增加到52但计数框没有增加。我把一块$ watch和$ observe但它没有修好。到目前为止我所做的是：
var tb = angular.module("tb", []);
tb.controller("tallyboxController", function ($scope) {
'use strict';
$scope.addVote = function(no){
$scope.presidents.votes+=1;
console.log($scope.presidents.votes);
}
$scope.addLine = function(){
//alert("Tina");
$scope.hello = "tina";
console.log($scope.hello);
};
$scope.label = {
table:{
cName:"Candidate's Name",
cVote:'Vote',
cTB:'Tally Boxes',
cNV:'No of votes',
period:'.'
},
};
$scope.presidents = [
{
no:'1',
name:'Jeoanna Lingh',
votes:51,
}
];
$scope.candidates = [
$scope.presidents,
$scope.vicepresidents
];
console.log($scope.presidents.votes);
});
var tb = angular.module('tb');
tb.directive('drawing', function(){
return {
restrict: 'A',
link: function(scope, element,attrs){
var votes = scope.value.votes;
var ctx = element[0].getContext('2d');
var remainder = 0;
var oneBox = 0;
if(votes > 4){
if(remainder = votes%5){
oneBox = (votes-remainder)/5 ;
}
drawOneBox()
}else{
remainder = votes;
}
console.log(votes);
ctx.beginPath()
function drawOneBox(){
var i;
for (i=0;i<oneBox;i++){
ctx.moveTo(5+i*25, 5);
ctx.lineTo(25+i*25, 5);
ctx.moveTo(5+i*25, 5);
ctx.lineTo(5+i*25, 25);
ctx.moveTo(25+i*25, 5);
ctx.lineTo(25+i*25, 25);
ctx.moveTo(5+i*25, 5);
ctx.lineTo(25+i*25, 25);
ctx.moveTo(25+i*25, 25);
ctx.lineTo(5+i*25, 25);
ctx.strokeStyle = "Red";
ctx.stroke();
}
if(remainder==1){
ctx.moveTo(5+i*25, 5);
ctx.lineTo(5+i*25, 25);
ctx.strokeStyle = "Red";
ctx.stroke();
}
if(remainder==2){
ctx.moveTo(5+i*25, 5);
ctx.lineTo(25+i*25, 5);
ctx.moveTo(5+i*25, 5);
ctx.lineTo(5+i*25, 25);
ctx.strokeStyle = "Red";
ctx.stroke();
}
if(remainder==3){
ctx.moveTo(5+i*25, 5);
ctx.lineTo(25+i*25, 5);
ctx.moveTo(5+i*25, 5);
ctx.lineTo(5+i*25, 25);
ctx.moveTo(25+i*25, 5);
ctx.lineTo(25+i*25, 25);
ctx.strokeStyle = "Red";
ctx.stroke();
}
if(remainder==4){
ctx.moveTo(5+i*25, 5);
ctx.lineTo(25+i*25, 5);
ctx.moveTo(5+i*25, 5);
ctx.lineTo(5+i*25, 25);
ctx.moveTo(25+i*25, 5);
ctx.lineTo(25+i*25, 25);
ctx.moveTo(25+i*25, 25);
ctx.lineTo(5+i*25, 25);
ctx.strokeStyle = "Red";
ctx.stroke();
}
};
} // end
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="tb">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="tallyboxController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>{{label.table.cName}}</td>
<td colspan="2">{{label.table.cVote}}</td>
<td>{{label.table.cTB}}</td>
<td>{{label.table.cNV}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in candidates[0]">
<td>{{value.no}} {{label.table.period}} {{value.name}}</td>
<td><button ng-click="addVote(key)">+</button></td>
<td><button ng-click="minus(key)">-</button></td>
<td><canvas width="500" height="26" id="{{value.no}}" drawing></canvas></td>
<td>{{value.votes}}</td>
</tr>
</tbody>
</table>
</div>
<script src="angular.min.js"></script>
<script src="tallyboxController.js"></script>
<script src="tallyboxDirective.js"></script>
</body>
</html>
非常感谢任何帮助。谢谢！
答案 0 :(得分：1)
这需要几个关键修复，这就是我所做的：
candidate和一个隔离范围，因此我们在隔离范围变量和控制器范围变量之间进行了双重绑定（这样我们就不必使用{{ 1}}）scope.$parent...观察者，它将使用我在上一步中提到的功能重新渲染画布。votes，以防没有剩余以下是工作版本：
oneBox = votes / 5;var tb = angular.module("tb", []);
tb.controller("tallyboxController", function($scope) {
'use strict';
$scope.addVote = function(no) {
$scope.presidents[no].votes += 1;
}
$scope.minus = function(no) {
$scope.presidents[no].votes -= 1;
}
$scope.addLine = function() {
//alert("Tina");
$scope.hello = "tina";
console.log($scope.hello);
};
$scope.label = {
table: {
cName: "Candidate's Name",
cVote: 'Vote',
cTB: 'Tally Boxes',
cNV: 'No of votes',
period: '.'
},
};
$scope.presidents = [{
no: '1',
name: 'Jeoanna Lingh',
votes: 52,
}];
$scope.candidates = [
$scope.presidents,
$scope.vicepresidents
];
});
var tb = angular.module('tb');
tb.directive('drawing', function() {
return {
restrict: 'A',
scope: {
candidate: '='
},
link: function(scope, element, attrs) {
var colors = ['Red', 'Green', 'Blue', 'Yellow'];
scope.$watch("candidate.votes", function(newValue, oldValue) {
console.log('rendering', newValue);
render();
});
function render() {
var votes = scope.candidate.votes;
var ctx = element[0].getContext('2d');
var remainder = 0;
var oneBox = 0;
// clear canvas (needed for subtracting votes)
// and is a good practice anyway
element[0].width = element[0].width;
if (votes > 4) {
if (remainder = votes % 5) {
oneBox = (votes - remainder) / 5;
}
else {
oneBox = votes / 5;
}
} else {
remainder = votes;
}
drawOneBox();
function drawOneBox() {
;
for (var i = 0; i < oneBox; i++) {
var color = colors[Math.floor(i/5)];
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.moveTo(25 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.moveTo(25 + i * 25, 25);
ctx.lineTo(5 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
// recheck the color
color = colors[Math.floor(oneBox/5)];
if (remainder == 1) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
if (remainder == 2) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
if (remainder == 3) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.moveTo(25 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
if (remainder == 4) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.moveTo(25 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.moveTo(25 + i * 25, 25);
ctx.lineTo(5 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
};
}
render();
} // end
};
});