在 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}} 和 {{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)
   });
}]);