时间戳

首页 > 解决方案 > Angular 工厂 $scope 变得无界

javascript - Angular 工厂 $scope 变得无界

问题描述

我有一个工厂，它返回一个我想在前端显示的对象。当我如下设置变量时，有一些奇怪的行为（至少对我而言）：

我在控制器的开头设置了一个变量“returnObject”，然后我在工厂输出的函数中分配它：

module.factory("MyFactory", function ($http, $timeout, $cookies) {

    var returnObject = {};

    var myFunction = function(response) {

        // un-coomment this and it doesn't work
        // var test = {1: 'test 2'};
        // returnObject = test;

        // this works
        returnObject[1] = 'test';
       
    }

    var poller = function() {
        $http.get('data.json').then(function(response) {
            $timeout(poller, 5000);
            myFunction(response);
        });
        return returnObject;    
    };   

    return {
        unreadMessagePoller: poller,
    };

});

app.controller('MainCtrl', MainCtrl);
function MainCtrl($scope, PollingService) {
    // poll for unread messages
    $scope.test = PollingService.unreadMessagePoller();
};

如果我在模板中输出 $scope 变量，我会看到预期的对象。但是，如果我取消注释以下行：

var test = {1: 'test 2'};
returnObject = test;

看来范围是未绑定的，前端输出是空的。我就是不明白！

我创建了一个 plunker 来演示这个问题。

https://plnkr.co/edit/feVaotKCE9w2uQLJ

更新：

这是另一个 plunker 不同的方法相同的行为，在我看来这是一个错误：

https://plnkr.co/edit/hEtPNWkkl5ZudEuB

标签： javascriptangularjs

解决方案

$scope.test = PollingService.unreadMessagePoller();

返回原始对象var returnObject = {};

编码：

$http.get('data.json').then(function(response) {
     returnObject[1] = 'test';        
});

修改原始对象的内容。

另一方面，代码：

$http.get('data.json').then(function(response) {
    var test = {1: 'test 2'};
    returnObject = test;
});

用新的对象引用替换工厂中的对象引用。

由于控制器具有原始对象引用，因此它看不到更改的对象引用。

这就是 JavaScript 的工作方式。

坦率地说，当数据从服务器到达时，返回一个空对象然后填充内容的技术是我避免使用的技术。该技术在 AngularJS 的早期很流行，但现在更新的 API 返回 Promise，而不是会发生变异的空对象。

推荐阅读