AngularJS：與$範圍和單選按鈕交互混淆

Question

爲什麼$scope在這個非常簡單的例子中不會改變狀態？當我選擇每個單選按鈕時，我希望看到控制檯消息顯示範圍的值已更改。這似乎很簡單，不知道我錯過了什麼。這就是說，我對角度很陌生，所以如果我正在做出我不應該做的假設，請糾正我。

HTML：

<div ng-app="demo" ng-controller="SampleCtrl"> 
    <span>Group by:</span> 
    <label><input type="radio" name="groupby" ng-model="groupby" value="1"/>Option 1</label> 
    <label><input type="radio" name="groupby" ng-model="groupby" value="2"/>Option 2</label> 
</div> 

JS：

var app = angular.module('demo', []); 

app.controller('SampleCtrl', function($scope) { 
    $scope.groupby = 2; 

    $scope.$watch($scope.groupby, function() { 
    console.log($scope.groupby); 
    }); 
}); 

小提琴：http://jsfiddle.net/BLSully/WL7as/

Answer 1

代碼應閱讀

var app = angular.module('demo', []); 

app.controller('SampleCtrl', function($scope) { 
    $scope.groupby = 2; 

    $scope.$watch('groupby', function() { 
     console.log($scope.groupby); 
     }); 
}); 

，或者在$watch表達您可以使用使用功能名稱

$scope.$watch(function() { return $scope.groupby }, function() { 
    ... 
}); 

的功能，而不是具有優勢。例如，您可以觀察複雜的表達式，而不僅僅是變量。

Answer 2

的$watch通常是在名scope屬性的設置。所以，我希望看到類似這樣的東西：

var app = angular.module('demo', []); 

app.controller('SampleCtrl', function($scope) { 
    $scope.groupby = 2; 

    $scope.$watch('groupby', function() { 
    console.log($scope.groupby); 
    }); 
}); 

這裏是一個updated fiddle。