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集線器連接沒有關閉，當用戶導航離開仍然是一個謎。如果有人知道這個答案，可以給我一些合乎邏輯的理由，我會接受答案。