Angular.js模型 - 视图 - 控制器动态更新不工作

AngularJS v1.2.0rc1Angular.js模型 - 视图 - 控制器动态更新不工作

我已经安装角模型 - 视图 - 控制器。它正在准确地从我的数据库请求数据并在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控制器没有动态更新。任何可以提供一些指导？

来源

2015-10-26 JnL

你能提供与此相关的控制器HTML模板？我想问题是你试图绑定一个父范围基元变量子范围 – MarkoCen

请显示你的html代码 –

刚刚添加的HTML代码。 @MarkoCen – JnL

你可能会犯一个常见的错误：尝试从父范围引用原始变量，在Angular中，子范围不能引用父范围（字符串，数字，布尔等）中定义的基本类型变量，任何原始引用将在具有相同值的子作用域中创建一个单独的变量。所以即使$scope.current在父范围内改变，子范围内的变量也不会改变。

further reading about scope

您可以使用对象来避免这种情况发生了：

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>

来源

2015-10-26 21:41:16 MarkoCen

Angular不会随此版本更新。 – JnL

Angular.js模型 - 视图 - 控制器动态更新不工作

回答

相关问题