AngularJS未使用SignalR更新UI



所以当我把angularjs代码放在signalR函数中时,它不会更新UI。我甚至用$scope.$apply()来强制消化。

这是我的代码:

var notificationHub = $.connection.progressNotificationHub;
notificationHub.client.displayAdminNotification = function (currentProgress, totalProgress, msg, finish) {
$scope.$apply(function () {
if ($scope.adminNotification == null)
$scope.adminNotification = {};
$scope.adminNotification.currentProgress = currentProgress;
$scope.adminNotification.totalProgress = totalProgress;
$scope.adminNotification.msg = msg;
$scope.adminNotification.percentage = totalProgress == 0 ? 0 : (currentProgress / totalProgress) * 100;
$scope.adminNotification.finish = finish;
if (finish) {
$scope.adminNotification = null;
}
})
};
$.connection.hub.start().done(function () {
});

这是我的UI:

<!-- Notification -->
<div class="admin-notification-container" ng-show="adminNotification != null && showAdminNotification">
<div class="dark-overlay" style="opacity:0.9"></div>
<div class="admin-notification-content">
<div class="admin-notification-progress">
<p>Progress: {{adminNotification.currentProgress}} of {{adminNotification.totalProgress}}</p>
<div class="admin-notification-progress-bar-container">
<div class="admin-notification-progress-bar progress-bar progress-bar-striped progress-bar-animated" style="width:{{adminNotification.percentage}}%">{{adminNotification.percentage}}%</div>
</div>
<p class="admin-notification-msg">{{adminNotification.msg}}</p>
</div>
</div>
<div class="hide-admin-notification" ng-click="toggleAdminNotification()">-</div>
</div>
<div ng-show="adminNotification != null && !showAdminNotification" class="hide-admin-notification-hide" ng-click="toggleAdminNotification()">^</div>

更新

经过进一步调查。当我的webapi服务器向UI发送消息时,displayAdminNotification函数内部使用的"$scope"与声明的$scope不同。它声明一个新的$scope并使用它

为什么会发生这种情况?

好的,所以问题是我的控制器被触发了两次。这是因为我有嵌套的控制器。

<div ng-app="app" ng-controller="ctrl">
......
<div ng-app="anotherApp" ng-controller="controller"></div>
</div>

我使用的控制器扩展了另一个控制器。类似这样的东西:

app.controller('ctrl', adminController);
adminController.$inject = ["$scope", "$controller", "$http", '$sce'];
function adminController ($scope, $controller, $http, $sce)
{
angular.extend(this, $controller('controller', { $scope: $scope }));
.....

对于出现此类问题的用户,请检查您的控制器结构。

最新更新