AngularJS控制器中的Scope变量在重访视图时未被清除

Question

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

我毂类看起来像：

MessagingHub.cs

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

} 

主应用程序模块在下面给出：

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(); 
     } 
    } 
})(); 

当我第一次进入“消息传递”视图并点击“连接”按钮时，它调用Hub上的Connect函数，然后在调用者上调用connected函数。我的Angular控制器中的处理函数设置了vm.isAvailable = true，这反过来在视图上显示了一个lebel。

一切工作正常，但是当我移动到其他视图然后再回来，并点击“连接”按钮，同样的过程要经历如上所述，但在JavaScript函数vm.isAvailable值已被设置为true这样的onConnected()根本不显示标签。

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

Answer 1

我发现了这个问题的解决方案。我不得不这样做的唯一的事情是处理的UI路由器的状态变化事件，并关闭就像下面SignalR轮毂的连接：

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

现在真的很有意义，当用户导航离开关闭集线器连接从消息传递视图，但为什么vm.isAvailable未设置为false重新访问视图时，如果SignalR集线器连接没有关闭，当用户导航离开仍然是一个谜。如果有人知道这个答案，可以给我一些合乎逻辑的理由，我会接受答案。