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

时间:2015-10-26 21:09:04

标签: javascript angularjs node.js model-view-controller

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控制器没有动态更新。可以提供一些指导吗?

1 个答案:

答案 0 :(得分:0)

你可能会犯一个常见的错误:尝试从父作用域引用一个原始变量,在Angular中,子作用域不能引用父作用域中定义的基本类型变量(string,number,bool ...等),任何原语引用将在子范围中创建具有相同值的单独变量。因此,即使在父作用域中$scope.current发生了更改,子作用域中的变量也不会发生变化。

further reading about scope

你可以使用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>