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

Question

AngularJS v1.2.0rc1

我已经设置了一个有角度的Model-View-Controller。 它正在准确地从我的数据库中请求数据并在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控制器不能动态更新。 可以提供一些指导吗？

Answer 1

您可能会犯一个常见的错误：尝试从父范围引用原始变量，在Angular中，子范围不能引用父范围中定义的原始类型变量（字符串，数字，布尔值等），任何原始引用都会创建子范围内具有相同值的单独变量。 因此，即使$scope.current在父作用$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>

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

问题描述

1 个解决方案

解决方案1
0 2015-10-26 21:41:16

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

问题描述

1 个解决方案

解决方案1 0 2015-10-26 21:41:16

解决方案1
0 2015-10-26 21:41:16