Question

每当用户在模板之间导航时，我都会有一个$stateChangeStart事件触发器，所以在用户更改状态时，在下面的代码中我正在删除$scope.filename正在按预期工作但当我返回到该页面时抛出异常，我失去了socket.io连接，因为$scope.filename值仍在执行if语句。在这种情况下，如何销毁$ scope值？

ctrl.js

angular.module('loggingApp').controller('DitCtrl', function($scope, $rootScope, DitFactory, FileSaver, Blob, socket, $uibModal, searchFactory) {
    'use strict';
    $scope.event = [];
    $scope.disabledRecBtn = false;
    $scope.disabledStopBtn = true;
    $scope.showMessage = false;
    var totalCurrentBytes = [];
    $scope.curVal = 4000;
    $scope.maxVal = 37737;

    //ENDS HERE
    var sendMessageFlag = false;
    // Delete File method
    function deleteFile(filename) {
        DitFactory.getFile(filename).then(function(response, $window) {
            console.log('data for download', response);
            var data = JSON.stringify(response.data);
            var blob = new Blob([data], {
                type: 'text/plain;charset=utf-8'
            });
            FileSaver.saveAs(blob, 'server.log');
            socket.emit('stopRecording', $scope.filename);
        });
    }
    socket.on('ditConsumer', function(data) {
        var obj = {
            file: $scope.filename,
            data: data
        }
        $scope.event.push(data);
        jsonToArray();
        socket.emit('messageToFile', obj);
        if (sendMessageFlag === true) {
            return sendMessageToFile(obj);
        }
    });

    function sendMessageToFile(data) {
        if (data.file) {
            socket.emit('startrecording', data);
            $scope.disabledRecBtn = true;
            $scope.disabledStopBtn = false;
            $scope.showMessage = true;
        }
    }
    $scope.stopLogs = function() {
        sendMessageFlag = false;
        $scope.modalInstance = $uibModal.open({
            templateUrl: '/web/global/modal.html',
            controller: 'ModalController'
        });
    };
    $rootScope.$on('downloadFile', function(s, data) {
        deleteFile($scope.filename);
        $scope.disabledRecBtn = false;
        $scope.disabledStopBtn = true;
        $scope.showMessage = false;
    });
    $rootScope.$on('onCancelDelete', function() {
        if ($scope.filename) {
            console.log('oncanceldelete function');
            socket.emit('stopRecording', $scope.filename);
            $scope.disabledRecBtn = false;
            $scope.disabledStopBtn = true;
            $scope.showMessage = false;
        }
    });
    $scope.recordLogs = function() {
        socket.emit('createlogfile');
        socket.on('filename', function(filename) {
            console.log('filename from sever', filename);
            $scope.filename = filename;
            sendMessageFlag = true;
            $scope.disabledRecBtn = true;
            $scope.disabledStopBtn = false;
            $scope.showMessage = true;
        });
    }

    //Search logs code here
    $scope.searchLogs = function() {
        $scope.modalInstance = $uibModal.open({
            templateUrl: '/view/modals/searchModal.html',
            controller: 'SearchController'
        });
        searchFactory.setDitLogs($scope.event);
    }
    $scope.serverFiles = function() {
        $scope.modalInstance = $uibModal.open({
            templateUrl: '/view/modals/serverModal.html',
            controller: 'ServerFilesCtrl'
        })
    }

      $rootScope.$on('$stateChangeStart',
           function(event, toState, toParams, fromState, fromParams){
               if($scope.filename) {
                   console.log($scope.filename);
                   console.log('STATE CHANGED');
                   console.log('destroy on close');
                   socket.emit('stopRecording', $scope.filename);
                   sendMessageFlag = false;
                   $scope.filename = null;
               }
           })
});

Answer 1

路由完成后，所有范围都将被销毁。这是ui-路由器附带的功能。如果你想为某种目的手动指定它，你可以使用$ scope。$ destroy来控制某些控制器。

Answer 2

当我回到状态时，所有方法都在调用两次，例如$scope.recordLogs打印console.log('filename from sever', filename);

console.log是已赋予socket服务的处理函数的一部分。即使$scope已被销毁，socket.on处理函数也已由socket服务保存。

   $scope.recordLogs = function() {
        socket.emit('createlogfile');
        //PROBLEM
        //event handler function retained by socket service
        socket.on('filename', function(filename) {
            console.log('filename from sever', filename);
            $scope.filename = filename;
            sendMessageFlag = true;
            $scope.disabledRecBtn = true;
            $scope.disabledStopBtn = false;
            $scope.showMessage = true;
        });
    }

为避免在用户在路线之间来回导航时使用socket.forward重复事件处理程序：

angular.module('myMod', ['btford.socket-io']).
  controller('MyCtrl', function ($scope, socket) {
    socket.forward('someEvent', $scope);
    $scope.$on('socket:someEvent', function (ev, data) {
      $scope.theData = data;
    });
  });

通过使用socket.forward，socket服务将在$scope被销毁时取消注册处理程序。

有关详细信息，请参阅angular-socket-io API Reference - socket.forward

如何在stateChange上销毁$ scope值？

2 个答案: