function demoCtrl($scope) { $scope.dest = [{ id: 1, name: 'Peter' }] $scope.$watch('dest', function() { $scope.watchLog.push({ log: '觸發!' }); }); $scope.$watchCollection('dest', function() { $scope.watchCollectionLog.push({ log: '觸發!' }); }); $scope.$watch('dest', function() { $scope.watchtrueLog.push({ log: '觸發!' }); }, true); $scope.deepChange = function() { $scope.dest[0].id = $scope.dest[0].id + 1; } $scope.shallowChange = function() { $scope.dest.push({ id: 1, name: 'Peter' }); } $scope.rebuild = function() { $scope.dest = [{ id: 1, name: 'Peter' }] } $scope.clear = function() { $scope.watchLog = []; $scope.watchCollectionLog = []; $scope.watchtrueLog = []; } $scope.clear(); }
<div ng-app> <div ng-controller='demoCtrl'> <h1>比較$watch()與$watchCollection()的不同</h1> <input type='button' value='屬性改變(深層)' ng-click='deepChange()'> <input type='button' value='屬性改變(淺層)' ng-click='shallowChange()'> <input type='button' value='重建物件' ng-click='rebuild()'> <input type='button' value='清除' ng-click='clear()'> <h2>$watch()</h2> <li ng-repeat='log in watchLog'>{{log.log}}</li> <h2>$watchCollection()</h2> <li ng-repeat='log in watchCollectionLog'>{{log.log}}</li> <h2>$watch(, true)</h2> <li ng-repeat='log in watchtrueLog'>{{log.log}}</li> </div> </div>