web-dev-qa-db-fra.com

AngularJS avec SignalR

Je joue avec Angular et SignalR, j'ai essayé de créer un service qui servira de gestionnaire.

dashboard.factory('notificationsHub', function ($scope) {
  var connection;
  var proxy;

  var initialize = function () {
    connection = $.hubConnection();
    proxy = connection.createHubProxy('notification');

    proxy.on('numberOfIncidents', function (numOfIncident) {
      console.log(numOfIncident);
      $scope.$emit('numberOfIncidents', numOfIncident);
    });

    connection.start()
      .done(function() {
        console.log('Connected');
      })
     .fail(function() { console.log('Failed to connect Connected'); });
  };

  return {
    initialize: initialize
  };
});

cependant, j'ai l'erreur Error: Unknown provider: $scopeProvider <- $scope <- notificationsHub.

Comment utiliser pubsub pour transmettre toutes les notifications aux contrôleurs? jQuery peut-être?

angularjssignalr
13
li-raz

$scope n'existe pas dans ce contexte car c'est quelque chose d'injecté lorsqu'un contrôleur est créé et qu'une nouvelle portée enfant est créée. Cependant, $rootScope est disponible au moment voulu. 

Notez également que $emit() monte et que les étendues de votre contrôleur ne le verront pas. Vous devrez soit basculer sur $broadcast() pour que l'événement diminue, soit injecter $rootScope également aux contrôleurs auxquels vous souhaitez pouvoir vous abonner à 'numberOfIncidents'.

Découvrez les docs angulaires et un wiki utile sur les portées .

5
johlrich

Voici un excellent exemple montrant comment insérer le proxy dans un service et utiliser $rootScope pour event pub/sub. 

http://sravi-kiran.blogspot.com/2013/09/ABetterWayOfUsingAspNetSignalRWithAngularJs.html

3
Jason Capriotti

Comme déjà indiqué dans la réponse de johlrich , $scope n'est pas disponible dans proxy.on. Cependant, le simple passage à $rootScope ne fonctionnera probablement pas. La raison en est que les gestionnaires d’événements enregistrés avec proxy.on sont appelés par le code en dehors du cadre angulaire et que, par conséquent, angular ne détectera pas les modifications apportées aux variables. Il en va de même pour $ rootScope. $ Sur les gestionnaires d'événements déclenchés par des événements diffusés à partir des gestionnaires d'événements SignalR. Voir https://docs.angularjs.org/error/$rootScope/inprog pour plus de détails.

Ainsi, vous souhaitez appeler $rootScope.$apply() à partir du gestionnaire d’événements SignalR, soit explicitement.

proxy.on('numberOfIncidents', function (numOfIncident) {
  console.log(numOfIncident);
  $scope.$apply(function () {
    $rootScope.$emit('numberOfIncidents', numOfIncident);
  });
});

ou éventuellement implicitement via $timeout

proxy.on('numberOfIncidents', function (numOfIncident) {
  console.log(numOfIncident);
  $timeout(function () {
    $rootScope.$emit('numberOfIncidents', numOfIncident);
  }, 0);
});
1
hlovdal