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

所以：

工厂似乎正在返回一个好的service对象，但我不确定为什么exampleFactory和exampleFactory.network_interfaces在控制器和工厂之间会有不同的状态，并且特别是在控制器本身内（无论它们被调用的顺序如何）。
我尝试了许多不同的解决方案，假设这是一个异步问题，但我认为getNetworkInterfaces方法没有明显的延迟，如果有的话，一切都设置正确Angular在返回数据后更新{{network_interfaces}}和{{factory_state}}视图绑定。
我也尝试在工厂中使用$rootScope.$apply包装各种功能作为黑暗中的镜头，但结果与上述相同。

我经常搜索一下，发现它有什么概念我很明显错过了，但我想我忽略了一些基本的东西。如何将getNetworkInterfaces（）数据放入我的控制器中处于有用的状态？

Answer 1

你在＃2中的假设是问题所在。在调用异步方法和调用其回调之间，总是是JavaScript事件循环的旋转。如果没有，那么在调用该方法的客户端中，各种各样的事情都会巧妙地破坏。这意味着您在Angular开发中遇到了一个常见问题：您没有收到有关更改内容的通知，因为更改并未在Angular的摘要周期内发生。

要解决此问题：尝试设置监视，然后在getNetworkInterfaces（）回调中调用$ scope.apply（）。 apply（）保证在摘要周期之外发生，因此您不应该获得应用中的错误。

或者，在回调完成后向自己发布消息。如果你是＃34的学生，那就更好了。如果你使用apply（），你的代码就会被破坏＆＃34;思想学派。

最后，考虑一下你在回调后调用的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)
   });
}]);

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

2 个答案: