页面加载时未显示角度 ng 重复
Angular ng-repeat not showing on page load
我以前从未遇到过这个问题,但我有一个 Angular 控制器,它可以从 SignalR HUB 中提取客户端连接数据列表并将其显示在状态页面上。 这是非常简单的事情。
我的问题是:当页面加载时,控制器运行并正确检索数据,但它不会显示在页面上,直到我做一些"推挤"角度的事情,比如单击过滤器文本框,然后单击它。 我实际上不必做任何更改数据的事情。 我已经设置了一个断点,并验证了数据是否已正确加载,并且是否正在将其分配给范围。 我还尝试在数据加载后立即使用 $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>
我确实删除了过滤器,但我仍然有同样的问题。 同样,我所要做的就是单击表单输入字段,然后再次将其取消聚焦,一切都会显示出来。 我不必输入任何东西。 数据就在那里,只是在你做某事之前不会显示出来。
angular.forEach
之后的赋值 ( $scope.clients = clients;
( 在循环完成之前执行。
尝试
....
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重复上切换图像
- 角度的项目列表 ng 重复,ng 单击显示全宽描述
- 防止ng重复中的重复值(AngularJS)
- 从键值结构中获取数据,并将其与AngularJS中ng重复的值进行比较
- 在ng重复循环中显示来自不同文件夹的图像
- 在ng重复循环中显示条件内容的最佳方式是什么
- 离子2:在离子载玻片内产生ng重复
- 正在ng重复元素上添加事件
- 嵌套ng重复angularjs
- ng模型内的ng重复的ng重复开始
- 混合元素的有角度的ng重复
- 如何避免在angular上多次调用方法;s ng重复
- 在表格格式中使用ng重复
- AngularJS ng重复处理空列表事例
- 如何在AngularJS-ng重复循环中将长JSON路径缩短为变量
- Angular在与ng重复作斗争
- ng重复中的ng模型-初始化唯一作用域属性
- ng重复变量到ng模型
- 尝试使用ng重复时出现空白屏幕
- 如何防止由ng重复引起的net::ERR_INSUFICIENT_RESOURCES错误