我是 AngularJS 的新手。但我有一个严重的问题。在过去的 48 小时里，我一直被困在这一点上。现在我的问题：
即使我更新控制器中的变量，我的视图也没有更新。这是代码。
var stData;
function mainCtrl($scope,$http){
retrieveDataset($scope,$http, 'http://localhost:8080/ramap-service/DataProvider?title='+$scope.title+'&year='+$scope.year);
$scope.$apply($scope.changeMap = function(){
var curl = 'http://localhost:8080/ramap-service/DataProvider?title='+$scope.title+'&year='+$scope.year;
console.log(curl);
showDialog();
retrieveDataset($scope,$http,curl);
});
function retrieveDataset($scope,$http, curl){
$http.get(curl).success(function (data,status){
console.log(data.description);
$scope.desc = data.description;
loadColors(data.results);
stData=data.results;
handleKeys($scope,data.results);
}).error(function(data,status){
console.log(data);
});
}
}
function loadColors(data){
var paths = document.getElementsByTagName('path');
for(var i=0;i<data.length;i++){
for(var j=0;j<paths.length;j++){
var path = paths[j];
if(data[i][4]===path.id){
path.style.fill=getColor(data[i][5],data);
break;
}
}
}
}
function getColor(amount, data){
var color;
var segments = segmentThem(data);
if(amount<=segments[1]){
color = '#FFE5E9';
}else if(amount<segments[2]){
color = '#FF657B';
}else if(amount < segments[3]){
color = '#B20019';
}else if(amount < segments[4]){
color = '#4C000B';
}else if (amount<segments[5]){
color = '#FFB1BC';
}else if (amount <segments[6]){
color = '#7E0012';
}else{
color = '#FE0024';
}
return color;
}
function segmentThem(data){
var min = findMin(data);
var max = findMax(data);
var diff = max - min;
var interval =diff/7;
interval = Math.round(interval);
interval = roundSpecially(interval);
var amounts = new Array();
for(var i=0;i<7;i++){
if(i===0){
amounts[i]=min;
continue;
}
var prev = parseInt(i)-1;
amounts[i] = amounts[prev]+interval;
}
return amounts;
}
function findMin(data){
var least =Number(data[0][5]);
for(var i=0;i<data.length;i++){
var num = Number(data[i][5]);
if(num<least){
least=num;
}
}
return least;
}
function findMax(data){
var max = Number(data[0][5]);
for(var i=0;i<data.length;i++){
var num = Number(data[i][5]);
if(num>max){
max=num;
}
}
return max;
}
function handleKeys($scope,data){
var segments = segmentThem(data);
var result = new Array();
var denom = 0;
if((segments[4]/1000000000)>0.99){
denom = 1000000000;
}else if ((segments[4]/1000000)>0.99){
denom = 1000000;
}else if((segments[4]/1000)>0.99){
denom = 1000;
}else{
denom = 100;
}
for(var i=0; i<segments.length;i++){
result[i] = segments[i]/denom;
}
$scope.denom = denom;
$scope.results = result;
}
function roundSpecially(num){
num = num+'';
var length = num.length-1;
var re = num[0];
for(var i=0; i<length;i++){
re=re+'0';
}
return Number(re);
}
function showInfo(){
var event = window.event;
var element = event.srcElement;
var data = getData(element.id);
document.getElementById('info').innerHTML= '<b>'+data[3]+'</b>'+"<br>"+currency('N', data[5]);
}
function getData(id){
var result;
for(var i=0;i<stData.length;i++){
if(id===stData[i][4]){
result = stData[i];
}
}
if(typeof result === 'undefined'){
return alert("This program has some undefined values on line 224");
}else{
return result;
}
}
function currency(sSymbol, vValue) {
vValue = Number(vValue);
var aDigits = vValue.toFixed(2).split(".");
aDigits[0] = aDigits[0].split("").reverse().join("").replace(/(\d{3})(?=\d)/g, "$1,").split("").reverse().join("");
return sSymbol + aDigits.join(".");
}
function showDialog(){
var el = document.getElementById("myOverlay");
el.style.visibility = (el.style.visibility==='hidden')?'visible':'hidden';
}
然后我的观点是这样的：
<div id="container" ng-controller="mainCtrl">
<header>
<img src="img/header3.png"/>
</header>
<aside >
<h5 >About the Current dataset</h5>
<p class="points" >Title</p>
{{title}} {{year}}
<p class="points">Description</p>
{{desc}}
</aside>
<div id="colorcode" >
<h5>Map key</h5>
({{denom|currency:"N"}})
<table >
<tr>
<th>Color</th>
<th>Range</th>
</tr>
<tr>
<td style="background:#FFE5E9;"></td>
<td >{{results[0]}} - {{results[1]}}</td>
</tr>
<tr>
<td style="background:#FF657B;"></td>
<td >{{results[1]}} - {{results[2]}}</td>
</tr>
<tr>
<td style="background:#B20019"></td>
<td >{{results[2]}} - {{results[3]}}</td>
</tr>
<tr>
<td style="background:#4C000B"></td>
<td>{{results[3]}} - {{results[4]}}</td>
<tr>
<td style="background:#FFB1BC;"></td>
<td>{{results[4]}} - {{results[5]}}</td>
</tr>
<tr>
<td style="background:#7E0012"></td>
<td>{{results[5]}} - {{results[6]}}</td>
</tr>
<tr>
<td style="background:#FE0024"></td>
<td>Above {{results[6]}}</td>
</tr>
</table>
</div>
<span onclick="showDialog()" id="editspan"><i class="icon-edit icon-2x"></i><input type="submit" name="button" id="button" value="Change Dataset"/></span>
<div id="info">
</div>
<div id="map">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="797" height="710" viewBox="0 0 297 210" >
<style type="text/css">
.state {fill:#FF0000; stroke:white ; stroke-width:0.5; stroke-opacity:1;}
</style>
</svg>
</div>
<div id="myOverlay">
<table id="dtable">
<tr id="row">
<td id="dtd"><form id="dialogue_box">
<div class="box1"><label id="label">Dataset title:</label></td>
<td id="dtd"> <select ng-model="title" value="budget works dataset">
<option value="budget works dataset" id="box" >Budget Works Dataset</option>
</select></td>
</tr></div>
<tr>
<td id="dtd"><div class="box1"><label id="label2">Specify Year: </td>
<td id="dtd"></label><select class="first" ng-model="year" >
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select></td>
</tr></div>
<tr>
<td id="submit"><button id="button" ng-controller="mainCtrl" ng-click="changeMap()"> Enter</button><button id="button" onclick="showDialog()"> Cancel</button></td>
</tr>
</form></div>
</table>
</div>
但这些变量都没有改变。