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（），返回给我更新的模型，其值为＆＃34; comp＆＃34;作为测试。

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

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

这也会返回对象值为test的数组...

所以我尝试了最后一件事，并在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

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

我创建了一个Plunker，用于演示angular.copy（）如何创建服务＆＃39; pot＆＃39;的深层副本，因此您的控制器模型不再引用原始模型

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

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

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

1 个答案: