1.-这是一个简单的ng-route
设置,我有3个按钮,每个按钮导航到一个新的路径。
2.-我有ng-view
3.-对于ng-view
我有一个模板,其范围绑定到属性subCtrl.id
,另一个范围绑定到'subCtrl.something'
,初始值为something.id=1
和{{ 1}}
4.-如果我通过Fiddler调用signalR方法并且我在 问题:但是如果我改变路线并导航到ctrl.optionSelected(2)或ctrl.optionSelected(3)并通过FIDDLER调用SignalR方法,客户端会收到它并且控制台打印&# 39;天使之眼',但视图没有更新! HTML JAVASCRIPT 模板/ Template.html SIGNAL R方法: 代码和解释似乎太长但实际上非常简单,请观看以下GIF 适用于初始路线: 更改视图后无效: 我在这里做错了什么?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>
<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>
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');
});
}]);
<span ng-bind="sctrl.something.id"></span>
<span ng-bind="sctrl.something.name"></span>
答案 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时才有效。