3

angular.extend を使用して、小さなオブジェクトを大きなオブジェクトにマージしています。

データのサンプルは次のとおりです。

$scope.bigDocument = {
    "id": 0,
    "guid": "e75ce3b3-68f6-423f-94d8-1a613cde0c59",
    "isActive": true,
    "balance": "$2,437.00",
    "picture": "http://placehold.it/32x32",
    "age": 38,
    "name": "Parks Williamson",
    "gender": "male",
    "company": "Arctiq",
    "email": "parkswilliamson@arctiq.com",
    "phone": "+1 (817) 488-3119",
    "address": "252 Concord Street, Morgandale, Arizona, 1866",
    "about": "Irure nostrud nisi qui do amet nisi adipisicing dolor eiusmod do non laboris.",
    "registered": "1995-04-08T20:16:47 +05:00",
    "latitude": -6.796341,
    "longitude": 40.321499,
    "randomArrayItem": "cherry"
}

$scope.littleDocument = {
     "balance": "$3,193.00",
     "picture": "http://placehold.it/32x32",
     "age": 22, 
     "name": "Coffey Wilcox",
     "gender": "male",
     "company": "Balooba",
     "email": "coffeywilcox@balooba.com",
     "phone": "+1 (824) 518-3639",
     "address": "836 Douglass Street, Imperial, Montana, 9365",
     "about": "Ipsum dolore officia consectetur proident occaecat.",
     "registered": "1994-12-12T15:47:09 +06:00",
     "latitude": -33.474425,
     "longitude": -113.998081,
}

次の関数を使用してマージしています。

$scope.merge = function() {
    angular.extend($scope.bigDocument, $scope.littleDocument)

そして、次の変更を監視します

$scope.$watch('bigDocument', function(newVal, oldVal) {
    console.log('bigDocument Changed');
})

$scope.bigDocument の最初のハイドレーションで期待される出力が得られますが、マージ関数が呼び出された後ではありません。データは正しく変更されますが、$watch メソッドがヒットすることはありません。

何を与える？

完全なワークフローを示すプランカー (coffeescript 内) は次のとおりです: http://plnkr.co/edit/VPnxhUa6uz1zKfcufb2J

4

1 に答える 1

5

$watch 関数は、オブジェクトを比較して等しいか参照するかを示す3 番目のブール値パラメーターを受け入れます。

$scope.$watch('bigDocument', function(newVal, oldVal) {
    console.log('bigDocument Changed');
}, true);

このプランカーは期待どおりに機能します。

于 2013-11-08T15:35:46.343 に答える