AngularJS

Question

我有一个 Angular 应用程序，我从模型中提取一些数据，这些数据保存在应用程序的加载中。为简单起见，我明确定义了要提取的数据。

我遇到的问题是，在我的一个控制器中，我是运行控制器加载函数，它修改从模型中提取的数据。关键是我想要那个只使用那个控制器的页面的额外数据。我不希望将数据保存回模型中（这是正在发生的事情）。

我的模特：

'use strict';
(function () {
    var PotsMod = function ($log, _) {
        return {
            pots: [
                {"comp" : "comp1"},
                {"comp" : "comp2"}
            ],
            getPots: function () {
                return this.pots;
            },
        };
    };
    angular
        .module('picksApp.models')
        .factory('PotsMod', PotsMod);
})();

我的控制器：

(function () {
    function AdmCtrl($log, $routeParams, PotsMod) {
        var vm = this;
        vm.pots = PotsMod.getPots();
        vm.init = function() {
            // populate pot.competition
            _.forEach(vm.pots, function(pot) {
                pot.comp = "test";
            });
            console.log(PotsMod.getPots());
        }
        vm.init();
    }
    angular
        .module('picksApp.controllers')
        .controller('AdmCtrl', AdmCtrl);
})();

vm.init()、PotsMod.getPots()、returns 中的最后一行对我来说是更新后的模型，"comp" 的值作为测试。

所以我尝试了这个 - 我将调试行放在 vm.pots 下，如下所示：

    var vm = this;
    vm.pots = PotsMod.getPots();
    console.log(vm.pots);
    vm.init = function() {....

这对我来说也是 returns 对象值被测试的数组...

所以我尝试了最后一件事，也在 vm.init() 函数中添加了一个额外的调试行：

    var vm = this;
    vm.pots = PotsMod.getPots();
    console.log(vm.pots);
    vm.init = function() {
        // populate pot.competition
        _.forEach(vm.pots, function(pot) {
            console.log(pot.comp);
            pot.comp = "test";
        });
        console.log(PotsMod.getPots());
    }
    vm.init();

结果让我很困惑...控制台中的输出为：

[{"comp":"test"},{"comp","test"}]
comp1
comp2
[{"comp":"test"},{"comp","test"}]

我一定是在这里遗漏了一些东西，因为我不明白它是如何使用模型的值定义一个变量，用更新的值打印该变量，然后使用旧值并打印它们，然后打印更新的再次从模型中获取值（即使此代码中没有任何内容涉及模型）。

请提供任何帮助，我发现某处犯了一个根本错误。谢谢。

Answer 1

您在控制器中引用服务的 pots 对象，因此您的控制器代码也在修改服务的代码。

我创建了一个 Plunker 来演示 angular.copy() 如何创建您服务的 'pots' 的深层副本，因此您的控制器模型不再引用原始模型。

在您的情况下，您只需更改 vm.pots = angular.copy(getPots());

http://plnkr.co/edit/jg5mWIWds1KMJd51e3o5?p=preview

AngularJS - 在控制器中使用模型导致模型更新

AngularJS - Using Model in Controller causing Model to update

javascript

angularjs-controller

angularjs-model