4

2 つの別個のコントローラー間でデータを共有することに関する質問に答えようとしているときに、質問に遭遇しました。

私は通常、このタスクにサービスを使用し、jsfiddle を作成し始めましたが、機能させることができませんでした。

setActivePersonWorks(person)ダーティチェックでプロパティを動的に作成した場合、少しデバッグした後、2番目のコントローラーが正しい値を示しました。

その値を割り当てた場合、setActivePersonDoesNotWork()そうではありませんでした。

使用した場合、実際に正しいデータが含まれて$timeout()いることを確認できました。DataService.badPerson

私は何か間違ったことをしていますか？何かをすれば$apply()正しく動作すると思いますが、値を動的に作成するとうまく動作するのはなぜですか?

作業例:

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);
}

の<html/>

<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について

4

1 に答える 1

9

Angularが見たとき

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

object に $watch を設定しますbadPerson。コントローラーを見ると、$scope.badPersonobject への参照DataService.badPersonです。これまでのところすべて問題ありません...問題はここで発生します：

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

この関数が実行badPersonされると、新しい/異なるオブジェクト参照が割り当てられますが、コントローラーはまだ古い/元のオブジェクト参照を監視しています。

修正は、新しい参照を割り当てるのではなく、angular.copy()を使用して既存のオブジェクトを更新することです。badPerson

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

これは、機能する理由も説明しsetActivePersonWorks()ています。新しいオブジェクト参照を割り当てません。

于 2013-05-09T15:51:15.330 に答える