Question

我之前从未遇到过这个问题，但我有一个Angular控制器从SignalR HUB中提取客户端连接数据列表并将其显示在状态页面上。这很简单。

我的问题是：当页面加载时，控制器运行并且它正确地检索数据，但是它不会在页面上显示，直到我做了一些＆＃34; jostles＆＃34;角度，例如单击过滤器文本框，然后单击它。我实际上不必做任何改变数据的事情。我已设置断点并验证数据是否已正确加载，并且已将其分配给作用域。我也尝试在数据加载后立即使用$ scope。$ apply（），但它没有任何影响。以下是相关代码：

控制器：

angular.module('statusModule', ['utilitiesModule']).
    controller('statusController', ['$scope', '$location', 'Util',
    function ($scope, $location, Util) {

        var gurcaHub = $.connection.gurcaHub;
        var indexes = {};
        var clients = [];
        $scope.search = { domain: '' };

        var refreshClientList = function () {
            gurcaHub.server.getClients("", 0).done(function (result) {
                angular.forEach(result, function (item) {

                    // omitted for brevity, all this does is massage the data a bit 

                    clients.push(item);

                });
                $scope.clients = clients;
            });
        };


        angular.element(document).ready(function () {

            $.connection.hub.error(function (error) {
                $scope.errorMsg = error;
            });

            $.connection.hub.start().done(function () {
                gurcaHub.server.connectManager({ ManagerToken: "123" }).done(function () {
                    refreshClientList();
                });
            });

        });

    }]);

这是相关的HTML：

<div class="panel panel-default" ng-repeat="item in clients | filter:search">
        <div class="panel-heading">
            <h3 class="panel-title">{{item.domain}} <span class="badge">{{item.numClients}}</span></h3>
        </div>
        <div class="panel-body">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Machine Name</th>
                        <th>Client ID</th>
                        <th>IP</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="client in item.clientList">
                        <td>{{client.Type}}</td>
                        <td>{{client.MachineName}}</td>
                        <td>{{client.ClientId}}</td>
                        <td>{{client.Ip}}</td>
                    </tr>
                </tbody>
            </table>            
        </div>
    </div>

我确实删除了过滤器，但仍然遇到了同样的问题。同样，我所要做的就是单击一个表单输入字段，然后再次对其进行去焦点，一切都会显示出来。我不需要输入任何东西。数据存在，只有在您执行某些操作后才会显示。

Answer 1

在循环完成之前执行$scope.clients = clients;之后的赋值（angular.forEach）。

尝试

....
    function ($scope, $location, $q, Util) {
    ...

        var refreshClientList = function () {
            gurcaHub.server.getClients("", 0).done(function (result) {
                angular.forEach(result, function (item) {

                    // omitted for brevity, all this does is massage the data a bit 

                    clients.push(item);

                });
                // execute when done processing
                $q.all(clients).then(function(){
                    $scope.clients = clients;
                });

            });
        };
...

}]);

角度ng-repeat未在页面加载时显示

1 个答案: