AngularJS控制器的变量没有更新

Question

我对以下代码有疑问。我有 prices 工厂，其中 returns 对象包含通过 websocket 从服务器接收的价格。单击按钮 Create 后发送价格。问题是 main.prices 变量根本没有更新。我可以通过 Check 按钮检查所有内容，这证实了这一点。 Prices.data 更新了，但 this.prices 没有更新，但它指的是同一个对象，所以我认为它也应该更新。您是否知道以下内容无法按预期工作的原因？

angular.module('myApp', ['ngWebSocket'])

    .factory('ws', ['$websocket', function($websocket){
        var url = 'ws://localhost/websocket';
        var ws = $websocket(url);        
        return ws;
    }])

    .factory('prices', ['ws', function(ws){
        var prices = {
            data: [],
            clear: function(){
                this.data = [];
            },
            create: function(){
                ws.send('send')
            }
        }

        ws.onMessage(function(message){
            message = JSON.parse(message.data);
            var type = message.type;

            if (type == 'new prices'){               
                prices.data = message.data;
            }
        });

        return prices;
    }])

    .controller('main', ['prices', function(prices){
        this.prices = prices.data;

        this.check = function(){
            console.log('works ', prices.data);
            console.log('not works ', this.prices);
        };

        this.create = function(){
            prices.create();
        };

        this.stop = function(){
            prices.clear();
        };
    }]);

<div ng-controller="main as main">
    {{ main.prices }}
    <button ng-click="main.create()">Create</button>
    <button ng-click="main.stop()">Stop</button>
    <button ng-click="main.check()">Check</button>
</div>

Answer 1

你发布的代码有很多问题（正在处理 fiddle 所以我可以帮助修改它）...

第一个变化：

if (type == 'new prices'){               
    prices.data = message.data;
}

收件人：

if (type == 'new prices'){   
    prices.data.length = 0;            
    prices.data.push.apply(prices.data,message.data) ;//copy all items to the array.
}

从可读性/可维护性的角度来看，您应该只使用 this.prices 与 this.prices.data。当您只能使用价格时，将它们映射到其他变量会让人感到困惑。另请注意，我将其更新为不断使用 "that" 以避免任何类型的上下文 this 问题。

.controller('main', ['prices', function(prices){
    var that = this;
    that.prices = prices;

    that.check = check;
    that.create = create; 
    that.stop = stop;

    function check(){
        console.log('works ', that.prices.data);
        console.log('not works ', that.prices);
    }

    function create(){
        that.prices.create();
    }
    function stop(){
        that.prices.clear();
    }
}]);

Answer 2

添加到先前的响应中，您在 clear() 上也有问题：

var prices = {
    ...
    clear: function(){
        this.data = [];
    },
    ...
}

当您使用 this.data = [] 进行清除时，您实际上是在创建一个新的空数组并将其存储在 this.data 属性中，并且由于这是一个新数组，因此参考主控制器 -> this.prices = prices.data;仍然指向旧的。如果您需要删除数组中的元素，只需使用 this.data.length = 0 正如 Nix 指出的另一种方法。这将使所有引用保持同步，因为您正在使用原始数组

AngularJS控制器的变量没有更新

AngularJS controller's variable is not updated

javascript

websocket

angularjs