访问AngularJS + Chrome Apps API中的工厂属性

Question

我正在尝试使用AngularJS构建Chrome应用，而我需要的功能之一就是通过chrome.system.network.getNetworkInterfaces监视可用的网络接口。 当前，我正在尝试将此数据存储在工厂中并将其注入到视图控制器中：

（尽可能减少）

厂：

exampleApp.factory('exampleFactory', ['$http', function ($http) {
    var service = {};
    service.network_interfaces = 'Detecting network connections...';

    chrome.system.network.getNetworkInterfaces(function(interfaces){
      service.network_interfaces = interfaces;
    })

    // This outputs the expected array containing interface data
    // in service.network_interfaces
    console.log(service)

    return service;
}]);

控制器：

exampleApp.controller('MainCtrl', ['$scope', '$http', 'exampleFactory', function($scope, $http, exampleFactory) {
    // This outputs the expected array in network_interfaces, identical
    // to the console output within the factory
    console.log(exampleFactory)

    // But then this outputs the initial 'Detecting network connections...'
    // string set in the factory
    console.log(exampleFactory.network_interfaces)

    // And {{network_interfaces}} and {{factory_state}} in the view keep
    // 'Detecting network connections...' as the value for network_interfaces
    // permanently
    $scope.factory_state = exampleFactory;
    $scope.network_interfaces = exampleFactory.network_interfaces;
}]);

所以：

1. 工厂似乎正在返回一个良好的service对象，但是我不确定为什么exampleFactory和exampleFactory.network_interfaces会在控制器和工厂之间，尤其是在控制器本身内，具有不同的状态（无论它们的顺序如何）来电）。
2. 我已经尝试了许多不同的解决方案，但都认为这是一个棘手的问题，但是我认为getNetworkInterfaces方法没有明显的延迟，并且如果所有设置都正确了，Angular可以更新{{network_interfaces}}一旦返回数据， {{network_interfaces}}和{{factory_state}}查看绑定。
3. 我还尝试过在工厂中使用$rootScope.$apply将各种功能包装起来，以暗中拍摄，但结果与上面相同。

我进行了很多搜索，以发现我显然错过的任何概念，但是我认为我忽略了一些基本概念。 如何以有用的状态将getNetworkInterfaces（）数据放入控制器？

Answer 1

您在＃2中的假设是问题所在。 在调用异步方法和调用其回调之间， 总是会出现JavaScript事件循环。 如果没有，客户端调用该方法的所有事情都会被巧妙地破坏。 这意味着您在Angular开发中遇到了一个普遍的问题：您不会收到有关某些更改的通知，因为更改未在Angular的摘要周期内发生。

要解决此问题：请尝试设置手表，然后在getNetworkInterfaces（）回调中调用$ scope.apply（）。 apply（）一定会在摘要周期之外发生，因此您不应收到Apply-in-apply错误。

或者，在回调完成后向自己发布消息。 如果您是“如果您正在使用apply（）您的代码已损坏”这门思想的学生，那会更好。

最后，考虑在回调之后调用的Promise。 这不太适合您设置代码的方式。

（此外，为什么要在工厂中完全调用异步方法？）

Answer 2

尝试在network_interfaces上观看以了解其修改时间

exampleApp.controller('MainCtrl', ['$scope', '$http', 'exampleFactory', function($scope, $http, exampleFactory) {
    // This outputs the expected array in network_interfaces, identical
    // to the console output within the factory
    console.log(exampleFactory)

    // But then this outputs the initial 'Detecting network connections...'
    // string set in the factory
    console.log(exampleFactory.network_interfaces)

    // And {{network_interfaces}} and {{factory_state}} in the view keep
    // 'Detecting network connections...' as the value for network_interfaces
    // permanently
    $scope.factory_state = exampleFactory;
    $scope.network_interfaces = exampleFactory.network_interfaces;

    $scope.$watch('factory_state.network_interfaces', function() {
       console.log($scope.factory_state)
   });
}]);