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

时间:2016-04-25 14:26:07

标签: javascript angularjs signalr ng-view

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

适用于初始路线:

enter image description here

更改视图后无效:

enter image description here

我在这里做错了什么?

3 个答案:

答案 0 :(得分: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();
    });

}]);

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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