AngularJS v1.2.0rc1
我已经设置了一个角度模型 - 视图 - 控制器。它准确地从我的数据库请求数据并在html页面上显示值。但是，我遇到的问题是当我请求的数据从显示的当前值更改时，它不会更新html视图。
代码 控制器
var API_ORDER_ROUTE = '/api/stats';
function feedingStatsCtrl($http, $scope) {
$http.get(API_ORDER_ROUTE).success(function(data, status, headers, config) {
if (data.error) {
$scope.error = data.error;
} else {
$scope.current = data.current;
$scope.average = data.average.toFixed(2);
$scope.days_left = data.days_left ? data.days_left : 0;
$scope.days_remaining = Math.min($scope.days_left / 30 * 100.0, 100);
} // EOF else
}).error(function(data, status, headers, config) {
$scope.error = "Error fetching order statistics.";
});
}
更新包含HTML代码
HTML
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title><%= title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://d396qusza40orc.cloudfront.net/startup/code/jquery.js"></script>
<script src="https://d396qusza40orc.cloudfront.net/startup/code/bootstrap.js"></script>
<script src="js/angular.min.js" ></script>
<script src="js/controllers.js"></script>
<script src="js/google-analytics.js"></script>
<script src="https://coinbase.com/assets/button.js"></script>
<script src="js/coinbase-post-payment.js"></script>
<link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fsocial-buttons.css">
<link rel="stylesheet" href="css/bitstarter-styles.css">
</head>
<body>
<!-- Mobile-friendly navbar adapted from example. -->
<!-- http://twitter.github.io/bootstrap/examples/starter-template.html -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar"
data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#"><%= name %></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="/led">LedTest</a></li>
<li><a href="/orders">Orders</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- We use row-fluid inside containers to achieve a resizable layout. -->
<!-- blogs.endjin.com/2013/04/tips-for-implementing-responsive-designs-using-bootstrap/ -->
<!-- http://stackoverflow.com/a/12270322 -->
<div class="container">
<!-- Font and paired font of .heading/.subheading and body from Google Fonts -->
<!-- www.google.com/fonts/specimen/Ubuntu -->
<!-- www.google.com/fonts/specimen/Ubuntu#pairings -->
<div class="row-fluid heading">
<div class="span12">
<h1><%= product_name %></h1>
</div>
</div>
<div class="row-fluid subheading">
<div class="span12">
<!-- Special typography from Bootstrap for lead paragraph. -->
<!-- http://twitter.github.io/bootstrap/base-css.html#typography -->
<p class="lead"><%= product_short_description %></p>
</div>
</div>
<div class="row-fluid pitch">
<div class="span5 offset1 video">
<img class="img-polaroid" src="img/480x300.gif">
</div>
<!-- We define a new 'actions' div to contain statistics, order, and share buttons.-->
<div class="span5 actions" ng-controller="feedingStatsCtrl">
<div class="row-fluid">
<div class="span8 offset2">
<div class="row-fluid statistics">
<div ng-show="!error">
<div class="span4">
<!-- linediv-l and linediv-r give dividing lines that look
different in horizontal and vertical layouts, illustrating
media queries. -->
<div class="linediv-l">
<h3>{{current}}</h3> <p>Current</p>
</div>
</div>
<div class="span4">
<div class="linediv-c">
<h3>{{average}}</h3> <p>Average</p>
</div>
</div>
<div class="span4">
<div class="linediv-r">
<h3>{{days_left}}</h3> <p>Days Left</p>
</div>
</div>
</div>
<div ng-show="error">
<h3>{{error}}</h3>
</div>
</div>
</div>
<div class="row-fluid" ng-show="!error">
<div class="span10 offset1">
<!-- Bootstrap progress bar -->
<!-- http://twitter.github.io/bootstrap/components.html#progress -->
<div class="thermometer progress active">
<div class="bar bar-success" ng-style="{'width': days_remaining+'%'}"></div>
<div class="bar bar-warning" ng-style="{'width': (100-days_remaining)+'%'}"></div>
</div>
</div>
</div>
我知道数据正在被正确请求。当我刷新浏览器时，它正确地更新了我从数据库中提取的三个变量。我只是无法弄清楚为什么Angular控制器没有动态更新。可以提供一些指导吗？
答案 0 :(得分：0)
你可能会犯一个常见的错误：尝试从父作用域引用一个原始变量，在Angular中，子作用域不能引用父作用域中定义的基本类型变量（string，number，bool ...等），任何原语引用将在子范围中创建具有相同值的单独变量。因此，即使在父作用域中$scope.current发生了更改，子作用域中的变量也不会发生变化。
你可以使用object来避免这种情况发生：
var API_ORDER_ROUTE = '/api/stats';
function feedingStatsCtrl($http, $scope) {
$scope.result = {};
$http.get(API_ORDER_ROUTE).success(function(data, status, headers, config) {
if (data.error) {
$scope.result.error = data.error;
} else {
$scope.result.current = data.current;
$scope.result.average = data.average.toFixed(2);
$scope.result.days_left = data.days_left ? data.days_left : 0;
$scope.result.days_remaining = Math.min($scope.days_left / 30 * 100.0,100);
} // EOF else
}).error(function(data, status, headers, config) {
$scope.result.error = "Error fetching order statistics.";
});
}
在模板中：
<div class="span8 offset2">
<div class="row-fluid statistics">
<div ng-show="!error">
<div class="span4">
<!-- linediv-l and linediv-r give dividing lines that look
different in horizontal and vertical layouts, illustrating
media queries. -->
<div class="linediv-l">
<h3>{{result.current}}</h3> <p>Current</p>
</div>
</div>
<div class="span4">
<div class="linediv-c">
<h3>{{result.average}}</h3> <p>Average</p>
</div>
</div>
<div class="span4">
<div class="linediv-r">
<h3>{{result.days_left}}</h3> <p>Days Left</p>
</div>
</div>
</div>
<div ng-show="error">
<h3>{{result.error}}</h3>
</div>
</div>
</div>