SignalR 在更改页面后不更新 ng-view

Question

1.- 这是一个简单的 ng-route 设置，我有 3 个按钮，每个按钮导航到一个新路径。

2.- 我有一个父控制器和一个子控制器用于 ng-view

3.- 对于 ng-view 我有一个模板，其跨度绑定到属性 subCtrl.id，另一个跨度绑定到 'subCtrl.something'，初始值为 something.id=1 和 something.name='blondie'

4.-如果我通过 Fiddler 调用 signalR 方法并且我 在初始路径 一切正常：SignalR 使用 'Angel Eyes'[= 更新视图24=]

问题：但是如果我更改路线并导航到 ctrl.optionSelected(2) 或 ctrl.optionSelected(3) 并通过 FIDDLER 调用 SignalR 方法，客户端收到它并且控制台打印 'Angel eyes'，但是视图没有更新！

HTML

<div ng-app="app">
<div ng-controller="mainCtrl as ctrl">
    <button ng-click="ctrl.optionSelected(1)">1</button>
    <button ng-click="ctrl.optionSelected(2)">2</button>
    <button ng-click="ctrl.optionSelected(3)">3</button>
    <div ng-view></div>
</div>

<script type="text/javascript" src="~/Scripts/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="~/Scripts/angular.min.js"></script>
<script type="text/javascript" src="~/Scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="~/Scripts/angular-route.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script type="text/javascript" src="~/signalr/hubs"></script>
<script type="text/javascript" src="~/Scripts/app.js"></script>

JAVASCRIPT

var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/:id', {
        templateUrl: '/Templates/template.html',
        controller: 'subCtrl',
        controllerAs: 'sctrl'
    });
}]);

app.controller('mainCtrl', ['$location', function ($location) {
   var self = this;
   self.optionSelected = function (option) {
      $location.path("/" + option);
   };

}]);

app.controller('subCtrl', ['$routeParams', '$scope', function ($routeParams, $scope) {
    var self = this;
    self.something= {};
    self.something.id = $routeParams.id;
    self.something.name = 'Blondie';

    self.hub = $.connection.AppHub;

    /*****HERE IS THE PROBLEM*************/
    self.hub.client.Hello = function () {
         console.log("Angel eyes");
         self.something.name= 'Angel eyes';
         $scope.$apply();
         };
    /*************************************/
$.connection.hub.start().done(function () {
    console.log('SignalR connection started');
    });
}]);

Templates/Template.html

<span ng-bind="sctrl.something.id"></span>
<span ng-bind="sctrl.something.name"></span>

信号 R 方法：

    [HttpGet]
    [Route("api/app/GetSignalRTest")]
    public IHttpActionResult GetSignalRTest()
    {
     var context = GlobalHost.ConnectionManager.GetHubContext<AppHub>();
     context.Clients.All.hello();  
     return Ok();
    }

代码和解释看似太长其实很简单，请看下面的动图

适用于初始路线：

更改视图后不起作用：

我做错了什么？

Answer 1

这可以使用 $timeout 指令来完成。在完成所有集线器更改后再次触发 angular 事件/ 这可以使用 $timeout 指令来完成。在完成所有集线器更改后再次触发 angular 事件/

Answer 2

感谢 Leandro Tutini 在 es.Whosebug

上回答了这个问题

只有第一个控制器附加到 SignalR 事件，这就是第二个控制器不工作的原因。

您可以将 SignalR 定义移动到将捕获事件并将其传播到子控制器的基本控制器

app.controller('mainCtrl', ['$location', '$scope', '$rootScope', function ($location, $scope, $rootScope) {

var self = this;
self.optionSelected = function (option) {
    $location.path("/" + option);
}
self.hub = $.connection.AppHub;


self.hub.client.Hello = function () {
console.log("Hello");
$rootScope.$broadcast('UpdateName', 'Angel eyes');
};

$.connection.hub.start().done(function () {
    console.log('SignalR connection started');
    });
}]);


app.controller('subCtrl', ['$routeParams', '$scope', function ($routeParams, $scope, $rootScope) {
var self = this;
self.something= {};
self.something.id = $routeParams.id;
self.something.name = 'Blondie';

$scope.$on('UpdateName', function(name){ 
    self.something.name = name;
    $rootScope.$apply();
    });

}]);

Answer 3

是的，我可以确认 SignalR 的东西应该在主要 ng-controller。

在我的 Angular SPA WebAPI 项目中，每当我路由到另一个页面并返回时，我都无法更新我的集合（视图 - ngRepeat）。它仅在我从 msgsCtrl 移至 rootCtrl 并使用 $rootScope 时起作用。

SignalR 在更改页面后不更新 ng-view

SignalR not updating ng-view after changing page

javascript

signalr

angularjs

ng-view