脏检查与控制器之间的共享服务，单向作品其他不？ [英] Dirty checking with shared service between controllers, One way works the other does not?

问题描述

在试图回答关于两个独立的控制器我遇到了一个问题之间共享数据的问题。

While attempting to answer a question regarding sharing data between two separate controllers I ran into a question .

我通常使用此任务服务，并开始创建的jsfiddle，但我无法得到它的工作。

I usually use services for for this task and began to create a jsfiddle, but I could not get it to work.

有点调试，如果我创建的动态性能后 setActivePersonWorks（人）脏检查工作，第二个控制器显示正确的值。

After a bit of debugging if I created the properties dynamically in setActivePersonWorks(person) the dirty checking worked and the second controller showed the correct value.

如果我分配了 setActivePersonDoesNotWork值（）事实并非如此。

If I assigned the value in setActivePersonDoesNotWork() it did not.

如果我用 $超时（）我能够验证 DataService.badPerson 确实包含正确的数据。

If I used $timeout() I was able to verify that DataService.badPerson did indeed contain the correct data.

我是不是做错了什么？我想如果你做 $适用的东西（）它会正常工作，但为什么创建值动态导致事情只是工作？

Am I doing something wrong? I guess if you do something with $apply() it will work correctly, but why does creating the values dynamically cause things to just work?

工作示例：

var myTest = angular.module("MyTest", []);
myTest.factory("DataService", function () {
    var People = {
        goodPerson: {},
        badPerson: {},
        setActivePersonWorks: function (person) {
            People.goodPerson.name = person.name;
            People.goodPerson.id = person.id;
        },
        setActivePersonDoesNotWork: function (person) {
            People.badPerson = person;
        }
    };
    return People;
});

function ViewController($scope, DataService, $timeout) {
    $timeout(function () {
        DataService.setActivePersonWorks({
            id: 1,
            name: "Good Mark"
        });
        DataService.setActivePersonDoesNotWork({
            id: 2,
            name: "Bad Mark"
        });
    }, 1000);
}

function DetailController($scope, DataService, $timeout) {
    $scope.goodPerson = DataService.goodPerson;
    $scope.badPerson = DataService.badPerson;

    $timeout(function(){
        $scope.message = "DataService has the value: " + DataService.badPerson.name + " but $scope.badPerson is " + $scope.badPerson.name;
    }, 2000);
}

的＆LT; HTML /＆GT;

<div ng-app="MyTest">
    <div ng-controller="ViewController"></div>
    <div ng-controller="DetailController">
         <h1>Works: {{goodPerson.name}}</h1>

         <h1>Does Not Work: {{badPerson.name}}</h1>
        {{message}}
    </div>
</div>

在的jsfiddle

推荐答案

在角看到

<h1>Does Not Work: {{badPerson.name}}</h1>

它建立在对象 badPerson A $手表。看着你的控制器， $ scope.badPerson 是反对 DataService.badPerson 的参考。一切都很好，到目前为止...问题发生在这里：

it sets up a $watch on object badPerson. Looking at your controller, $scope.badPerson is a reference to object DataService.badPerson. All is fine so far... the problem happens here:

setActivePersonDoesNotWork: function (person) {
    People.badPerson = person;
}

在执行此函数， badPerson 被赋予了新的/不同的对象引用，但控制器仍然是$看老/原始对象引用。

When this function executes, badPerson is assigned a new/different object reference, but the controller is still $watching the old/original object reference.

解决方法是使用 angular.copy（）来更新现有的 badPerson 对象，而不是分配一个新的参考：

The fix is to use angular.copy() to update the existing badPerson object, rather than assigning a new reference:

setActivePersonDoesNotWork: function (person) {
    angular.copy(person, People.badPerson);
}

这也解释了为什么 setActivePersonWorks（）工作 - 它不会给一个新的对象引用

This also explains why setActivePersonWorks() works -- it does not assign a new object reference.

这篇关于脏检查与控制器之间的共享服务，单向作品其他不？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！