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

Question

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

2.-我有ng-view

的父控制器和子控制器

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

4.-如果我通过Fiddler调用signalR方法并且我在 ，一切正常：SignalR使用＆＃39; Angel Eyes＆＃39; <更新视图/ p>

问题：但是如果我改变路线并导航到ctrl.optionSelected（2）或ctrl.optionSelected（3）并通过FIDDLER调用SignalR方法，客户端会收到它并且控制台打印＆＃ 39;天使之眼＆＃39;，但视图没有更新！

HTML

something.name='blondie'

<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>

JAVASCRIPT

<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>

模板/ Template.html

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

SIGNAL R方法：

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

代码和解释似乎太长但实际上非常简单，请观看以下GIF

适用于初始路线：

更改视图后无效：

我在这里做错了什么？

Answer 1

感谢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 2

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

Answer 3

是的，我可以确认SignalR的东西应该在主控制器上。

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