Question

为什么$scope.events.push(data);同时更新范围和工厂？

为什么EventFactory.setEvent(data);更新工厂和范围？

要点：

$scope.events.push(data); //should only update scope but also updates factory
EventFactory.setEvent(data); //should only update factory but also updates scope

如果我不取消注释其中一行，那么我会得到与以下相同的效果：

$scope.events.push(data);
$scope.events.push(data);

或

EventFactory.setEvent(data);
EventFactory.setEvent(data);

基本上$scope.events.push(data);和EventFactory.setEvent(data);更新工厂和范围。

我希望$scope.events.push(data);只更新范围。

我希望EventFactory.setEvent(data);只更新工厂。

app.js（包含工厂）

...
app.factory("EventFactory", function($http){

    var events = [];

    var init = function(){
        return $http.get("api/events", {cache:true})
        .then(
            function(response){
                events = response.data;
                return response.data;
            });
    };

    var getEvents = function(){
        return events;
    };

    var setEvent = function(data){
        events.push(data);
    };

    return {
        init: init,
        getEvents: getEvents,
        setEvent: setEvent
    }
});
...

EventListCtrl.js（控制器）

angular.module("EventListCtrl", []).controller("EventListController", function($scope, EventFactory, socket){

    $scope.events = [];

    EventFactory.init().then(function(events){
        $scope.events = events;
    });

    socket.on("event created", function(data){
        $scope.events.push(data); // should only update scope but updates factory as well
        EventFactory.setEvent(data); // should only update factory but updates scope as well
    });
});

我已经测试了代码并且套接字不是问题，也许已经发生了一些我尚未理解的绑定。

非常感谢任何帮助。

谢谢

Answer 1

这种情况正在发生，因为您在控制器中制作了$scope.events = events而不是$scope.events = angular.copy(events);

（您可以在服务中制作副本，这样会更干）

更明显地说，这种情况正在发生，因为你正在制作对象参考;不是对象克隆/副本。 （数组在技术上是对象）

Answer 2

您正在发送＆＃34;已创建活动的套接字事件＆＃34;对其他人也可能是自己接收，所以你的范围也会更新

更多

angularjs中的所有服务都是单身人士

你到处都只有一份服务副本，当你在工厂改变一些东西时它会如何工作，它也会在别处更新

Answer 3

在EventListCtrl控制器中，您执行浅拷贝：

 $scope.events = events;

其中两个对象具有相同的引用。

要从中进行深层复制，angular为我们提供了copy（）方法：

angular.copy(source, [destination]);
source: The source that will be used to make a copy. Can be any type, including primitives, null, and undefined
destination(optional): Destination into which the source is copied. If provided, must be of the same type as source.

在你的情况下应该是：

$scope.events = angular.copy(events);

为什么我的示波器会更新我的工厂，而我的工厂不应该更新我的示波器？

3 个答案: