Question

我是一个棱角分明的小伙子。这是我的第一个“真正的”角度应用程序。它只显示用户指定日期的事务或统计信息。数据来自RESTful服务。我遇到的问题是，当从此服务返回的数据发生更改时，我的视图会更新。我的应用程序显示日期输入字段...用户可以在其中指定我生成的报告的日期。日期用于我的两个控制器......所以我创建了一个服务来使它可用。该应用初始化并显示今天的统计报告这很好用。当用户更改日期字段时，页面上的标题会更新（“{{drDate}}的统计信息”）。我有一个关于fileName的监视，它是host / service / {{drDate}}。这会导致控制器重新检索指定的数据。这很好用。但是，即使数据已被修改...... UI也不会更新我有一个ng-repeat在表格中显示我的数据。这不会更新视图。我玩过$ watch，$ apply和其他一些东西......但是还没有能够让它更新。事实上这很困难让我相信我只是接近这个错误？如果我在视图（统计和事务）之间切换...每个模板在最初呈现时正确显示...但不在用户提供的输入上显示。下面是我的控制器和模板的代码。统计仅用于节省空间。非常感谢任何帮助!!

- app.js -

'use strict';
// Declare app level module which depends on filters, and services
var statsApp = angular.module('statsApp', [
    'ngRoute',
    'statsAppControllers'
]);

statsApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/statistics', {
                templateUrl: 'partials/statistics.html',
                controller: 'StatisticsCtrl'
            }).
            when('/transactions', {
                templateUrl: 'partials/transactions.html',
                controller: 'TransactionsCtrl'
            }).
            otherwise({
                redirectTo: '/statistics'
            });
    }]);

- controllers.js -

'use strict';

var statsAppControllers = angular.module('statsAppControllers', []).service(
        'SharedProperties', function() {
            return {
                drDate : {
                    current : getFormattedDate()
                }
            };
        });

statsAppControllers.controller('StatisticsCtrl', function($scope, $http,
        SharedProperties) {
    $scope.message = 'Inside Statistics Controller';
    $scope.drDate = SharedProperties.drDate;
    var fileName = 'http://tomcatHost : 8080/counts/'
            + $scope.drDate.current;
    $scope.fileName = fileName;

    $scope.$watch('fileName', function() {
        alert('inside scope.watch');
        getStatistics($scope, $http, fileName);
    });

    getStatistics($scope, $http, fileName);

    $scope.dateChanged = function() {
        alert('dateChanged:' + $scope.$$phase);
        getStatistics($scope, $http, fileName);
    };
});

function getStatistics($scope, $http, fileName) {
    var fileName = 'http://tomcatHost : 8080/counts/'
            + $scope.drDate.current;

     alert('getStatistics() ' + fileName);

    $http.get(fileName).success(function(data, status, headers, config) {
        $scope.statistics = {};
        $scope.statistics.items = data;

    }).error(function(data, status, headers, config) {
        alert('http.get() error retrieving ' + fileName);
    });
}

statsAppControllers.controller('TransactionsCtrl', function($scope, $http,
        SharedProperties) {
    $scope.message = 'Inside Transactions Controller';
    $scope.drDate = SharedProperties.drDate;
    var fileName = 'http://tomcatHost : 8080/transactions/'
            + $scope.drDate.current;
    $http.get(fileName).success(function(data, status, headers, config) {
        $scope.transactions = {};
        $scope.transactions.items = data;
    }).error(function(data, status, headers, config) {
        alert('http.get() error retrieving ' + fileName);
    });
});

- 的index.html -

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html lang="en" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en" class="no-js">
<!--<![endif]-->

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="statsApp">

    <div ng-controller="StatisticsCtrl">

        <form>
            Enter The Desired Date: <input type="date" name="drDate"
                ng-model="drDate.current" ng-change="dateChanged()"><br>
            <input type="submit" value="Submit">
        </form>

        <ul class="menu">
            <li><a href="#/statistics">Statistics</a></li>
            <li><a href="#/transactions">Transactions</a></li>
        </ul>

    </div>


    <div ng-view></div>

</body>
</html>

- statistics.html -

<DIV ng-controller="StatisticsCtrl">
    <TABLE border="1">
        <TR>
            <TD colspan="100%">Statistics For: {{drDate.current}}</TD>
        </TR>
        <TR>
            <TD colspan="100%">{{message}}</TD>     // This is for debug purposes... 
        </TR>
        <TR>
            <TD colspan="100%">{{filename}}</TD>    // This is for debug purposes... it updates as expected
        </TR>
        <TR ng-repeat="stats in statistics.items" ng-model="statistics.items" > // This ng-repeat does not get updated :-\
            <TD>{{stats.send_method}}</TD>
            <TD>&nbsp;</TD>
            <TD>{{stats.count}}</TD>
        </TR>
        <TR>
            <TD colspan="100%">Total number of statistics:
                {{statistics.items.length}}</TD>
        </TR>
        <TR>
            <TD colspan="100%">ServiceURL :         // This is for debug purposes... it updates as expected
                {{fileName}}</TD>
        </TR>
    </TABLE>
</DIV>

Answer 1

您有两个不同的StatisticsCtrl实例。每个都有自己的统计数据和日期。一个在主页面（index.html）中使用，包含输入字段：

<div ng-controller="StatisticsCtrl">

，另一个在统计视图中：

<DIV ng-controller="StatisticsCtrl">

因此，当外部控制器中的日期发生更改时，外部作用域的日期会更改，并且外部作用域的统计信息会被修改。但内部范围的统计数据保持不变。

您不应该有2个控制器实例。将日期处理保留在外部控制器中，不同类型，并在内部控制器中，使用日期上的监视，或监听外部控制器广播的事件，以便在每次数据更改时重新加载统计信息。

AngularJS视图未被更新

1 个答案: