AngularJS $手錶不等待觸發發生，執行回調函數

Question

我有下面的代碼

提琴手Link

HTML中的$範圍：

<div ng-app ng-controller="ParentCtrl" ng-init="cities='North America'"> 
     <div ng-controller="ChildCtrl as vm"> 
      {{$parent.cities}} 
      <div> 
      <button ng-click="check()">Check the value</button> 
      </div> 
     </div> 
</div> 

Javascript：

function ParentCtrl($scope, $rootScope) {   
     $rootScope.$watch('changecity', function() {  
      $scope.cities = "South America"; 
      console.log("changed the city");        
     }); 

     $scope.cities = "North America"; 
    } 

    function ChildCtrl($scope, $rootScope) {        
     $scope.check = function(){ 
      console.log("$parent value:"+$scope.$parent.cities + "\n$scope value:"+$scope.cities)   
     }; 
    } 

我有ng-init = "cities='North America'"和$scope.cities = "North America";在ParentCtrl。

但輸出的視圖更新爲南美洲這很奇怪。有人可以解釋在上述代碼塊中發生的執行的全部基礎。

1. 是$watch最初執行回調嗎？
2. 作用域覆蓋的優先級是什麼？即：監視回調中的作用域覆蓋之前設置的值？

Answer 1

$watch當變量爲undefined時開始觀察。 $ watch將在初始化時觸發，因爲它將undefined視爲範圍變量中的新狀態更改。除此之外，範圍變量$scope.cities = 'North America'的設置被視爲變量的變化。此更改觸發$watch，而這又改變了$scope.cities='South America'。

爲了解決這個問題只是檢查舊值不undefined：

$rootScope.$watch('changecity', function(newvalue, oldvalue) {  
     // This will only change the cities if the original value was falsy 
     if(oldvalue) { 
     $scope.cities = "South America"; 
     console.log("changed the city");        
     } 
    }); 

更多信息參見：http://jsfiddle.net/7wr6ow57/4/