更改页面后 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 使用“天使之眼”更新视图

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

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');
    });
}]);

模板/Template.html

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

SIGNAL R 方法：

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

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

适用于初始路线：

更改视图后不起作用：

我在这里做错了什么？

Answer 1

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

Answer 2

感谢 Leandro Tutini 在es.stackoverflow 上回答了这个问题

只有第一个控制器被附加到 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 控制器上。

在我的 Angular SPA WebAPI 项目中，每当我路由到另一个页面并返回时，我都无法更新我的集合（查看 - ngRepeat）。只有当我从 msgsCtrl 移动到 rootCtrl 并使用 $rootScope 时，它​​才有效。