SignalR nicht aktualisieren ng-view nach dem Ändern der Seite

Question

1.- Es ist eine einfache ng-route Setup, ich habe 3 Tasten, jeder Knopf navigiert zu einem neuen Pfad.

2.- Ich habe eine übergeordnete Steuerung und ein Kind Controller für ng-view

3.- Für ng-view ich eine Vorlage mit einer Spannweite von Eigentum subCtrl.id und einer anderen Spanne 'subCtrl.something' mit einem Anfangswert von something.id=1 gebunden gebunden habe und something.name='blondie'

4.-Wenn ich die signalR Methode durch Fiddler nennen und ich bin an der intitial Route funktioniert alles einwandfrei: signalR aktualisiert die Ansicht mit 'Angel Eyes'

PROBLEM: ABER Wenn ich die Route ändern und ctrl.optionSelected (2) oder ctrl.optionSelected (3) aufrufen und SignalR-Methode über FIDDLER aufrufen, erhält der Client es und die Konsole druckt 'Angel Eyes', ABER die Ansicht ist Nicht aktualisiert!

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

Vorlagen/template.html

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

SIGNAL R Methode:

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

Der Code und die Erklärung scheint zu lang zu sein, aber es ist eigentlich sehr einfach, benutzen Sie bitte die folgenden Gifs

Arbeiten mit Anfangsroute sehen:

Funktioniert nicht nach dem Ändern der Ansicht:

Was mache ich hier falsch?

Answer 1

Dank Leandro Tutini, die diese beantwortete auf es.stackoverflow

Nur den ersten Controller ist mit dem SignalR Ereignisse angebracht ist, das ist, warum der zweite Controller funktioniert nicht.

Sie können die SignalR Definition auf die Basis-Controller bewegen, die die Ereignisse fangen wird und sie an die Steuerung Kind

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

Dies kann mit der Anweisung $ timeout durchgeführt werden. Feuern Sie die Winkelereignisse erneut ab, nachdem alle Hub-Änderungen vorgenommen wurden/ Dies kann mit der $ timeout-Anweisung erfolgen. Feuer der Winkel Ereignisse wieder, nachdem all Nabe Änderungen vorgenommen werden/

Answer 3

Ja, ausbreiten kann ich bestätigen, dass SignalR Sachen auf dem Haupt ng- sein sollte Regler.

Hier in meinem Angular SPA WebAPI Projekt, konnte ich nicht meine Sammlung macht aktualisiert werden (view - ngRepeat), wenn ich Route zu einer anderen Seite und kommt zurück. Es funktionierte nur, wenn ich von msgsCtrl zu rootCtrl bewegt, und die Nutzung von $ rootScope.