Question

我正在编写一个与SignalR 2.2通信的AngularJS客户端应用程序。 Angular应用程序还使用Angular UI路由器库。

我的集线器课程如下：

MessagingHub.cs

public class MessagingHub : Hub
{
    public void Connect()
    {
        Clients.Caller.connected();
    }

}

主app模块如下：

app.js

(function () {
    'use strict';
    angular.module('app', ['ui.router']);

    //Global error handler for the signalR
    $.connection.hub.error(function (err) {
        console.log('An error occurred: ' + err);
    })
    //Make signalR proxy as a service available to other components.
    angular.module('app').value('message', $.connection.messagingHub);


    angular.module('app').config(function ($stateProvider, $urlRouterProvider) {

        // For any unmatched url, send to /contact
        $urlRouterProvider.otherwise("/contact");

        $stateProvider
          .state('contact', {
              url: "/contact",
              templateUrl: "/app/contact.html"
          })
            .state('messaging', {
                url: "/messaging",
                templateUrl: "/app/messaging.html"
            })

          .state('about', {
              url: "/about",
              templateUrl: "/app/about.html"
          });

    });

})();

contact.html 和 about.html 文件除了某些标题之外什么也没有。

messaging.html如下：

的messaging.html

<div ng-controller="messaging as vm">
    <h1>Messaging</h1>
    <div ng-show="vm.isConnected"><p class="label label-primary">Welcome...</p></div>
    <div ng-show="vm.isAvailable"><p class="label label-info">Your status is available now</p></div>
    <br />
    <br />
    <button class="btn btn-sm btn-primary" ng-click="vm.onStartMessaging()">Connect</button>

</div>

和相应的控制器如下：

messaging.js

(function () {
    'use strict';

    angular
        .module('app')
        .controller('messaging', ['$scope', '$timeout','message', messaging]);    

    function messaging($scope, $timeout, message) {
        var vm = this;

        vm.isConnected = false;
        vm.isAvailable = false;
        vm.onStartMessaging = onStartMessaging;
        message.client.connected = onConnected;

        function onStartMessaging() {
            $.connection.hub.logging = true;
            $.connection.hub.start().done(function () {                
                message.server.connect();
                $timeout(function () {
                    vm.isConnected = true;                    
                });
            });
        }

        function onConnected() {                            
            vm.isAvailable = true;   
            $scope.$apply();
        }
    }
})();

当我第一次进入“消息”视图并单击“连接”按钮时，它会调用Connect上的Hub函数，然后在调用者上调用connected函数。我的Angular控制器中的处理函数设置vm.isAvailable = true，而onConnected()又显示视图的左侧。

一切正常但是当我移动到其他视图并再次点击“连接”按钮时，同样的过程如上所述，但在vm.isAvailable javascript函数中true的值已设置为UIView，因此标签不会全部显示为奇数。

任何人都可以帮助我理解为什么会发生这种情况以及我有什么选择。

Answer 1

我找到了解决这个问题的方法。我唯一要做的就是处理ui路由器的状态更改事件，并关闭与SignalR hub的连接，如下所示：

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ 
    $.connection.hub.stop();
});

现在，当用户离开消息传递视图时关闭集线器连接是有意义的，但是如果SignalR集线器连接不是，则在重新访问视图时vm.isAvailable未设置为false的原因当用户导航离开时关闭对我来说仍然是一个谜。如果有人知道答案，并且能给我一些合乎逻辑的理由，我会接受答案。

AngularJS控制器中的范围变量在重新访问视图时未清除

1 个答案: