javascript - $routeProvider 异步不工作

Question

我正在使用 USB 设备构建一个 chrome 应用程序。在我的主要 app.js 中，我希望始终检查设备何时添加/删除并更改 url。

angular.module('rfApp', [
    'ngRoute',
    'ngMaterial',
    'rfApp.view1',
    'rfApp.view2',
    'rfApp.device_not_found'
]).config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
    $locationProvider.hashPrefix('!');

    function checkForDevices() {
        RFFWHID.getDevices(function(current_devices) {
            if(current_devices.length > 0) {
                $routeProvider.otherwise({redirectTo: '/view1'});
            } else {
                $routeProvider.otherwise({redirectTo: '/device_not_found'});
            }
        });
    }

    chrome.hid.onDeviceAdded.addListener(function(){
        checkForDevices();
    });
    chrome.hid.onDeviceRemoved.addListener(function(){
        checkForDevices();
    });

    checkForDevices();

}]);

但是重定向在异步函数中不起作用。

编辑:

我发现了类似的问题 How to call $urlRouterProvider.otherwise() after loading JSON file? ，第一个答案描述这是不可能的。但是我该如何解决这个问题。我需要全局检查 usb 删除/添加并根据它更改 View 。

Answer 1

很难调试，因为我现在没有 chrome 应用程序的环境，但你可以改变方法。您可以使用 $routeChangeSuccess，而不是使用 $routeProvider 重定向:

angular.module('rfApp')
.factory('deviceManager', ($rootScope) => {
    let deviceConnected = false;
    
    chrome.hid.onDeviceAdded.addListener(function() {
        checkForDevices();
    });
    chrome.hid.onDeviceRemoved.addListener(function() {
        checkForDevices();
    });

    checkForDevices();
    return {
        isDeviceConnected: isDeviceConnected
    };

    function isDeviceConnected() {
        return deviceConnected;
    }

    function checkForDevices() {
        RFFWHID.getDevices(function(current_devices) {            
            deviceConnected = current_devices.length > 0;
            $rootScope.$emit('deviceChange');
        });
    }    
})
.run(($rootScope, $location, deviceManager) => {
    $rootScope.$on('$routeChangeSuccess', checkAndRedirect);
    $rootScope.$on('deviceChange', checkAndRedirect);

    function checkAndRedirect() {
        if (deviceManager.isDeviceConnected()) {
            $location.url('/view1')
        } else {
            $location.url('/device_not_found');
        }
    }
});

所以基本上每次状态改变时，您都会检查设备是否以同步方式连接，并且您可以使用 $location.url 或任何最适合您的方式重定向用户。

编辑:我添加了一个自定义的 $rootScope 事件，该事件在设备连接/断开连接时触发。您的应用程序现在应该会在每次触发事件时自动更改状态。