Angularjs 模型仅在视图中更改，而不在控制器中更改

Question

可能是一个新手问题。

我有一个问题，我在 HTML 中的数据绑定更新得很好，但 log_interval 函数总是控制台日志“3”。我想使用更新的模型“间隔”以不同的间隔向时间序列数据库发送请求。但是每次我只发送 3 个，即使我的视图正在更新。

我尝试过使用 $scope.$watch（就像在 sn-p 中一样），但它只在页面加载时触发。 我还尝试在所有单选按钮和元素中分别使用 ng-change 和 ng-click。我试图调用 $scope.$watch，但我收到一条错误消息，提示 $digest 已经在运行。没有任何效果:( 如何更新控制器中的模型，以便可以将其用于不同的 HTTP 请求？

.controller('DashCtrl', ['$scope', '$log', function($scope, $log) {

  $scope.interval = 3;

  $scope.$watch("interval", function() {
    $log.log($scope.interval);
  }, true);
  
  $scope.log_interval = function() {
    $log.log($scope.interval);
  };
 
}])

;

<h1>{{interval}}</h1>
<div class="btn-group btn-group-justified">
    <label class="btn btn-default" ng-model="interval" btn-radio="1" uncheckable>1 day</label>
    <label class="btn btn-default" ng-model="interval" btn-radio="2" uncheckable>3 days</label>
    <label class="btn btn-default" ng-model="interval" btn-radio="3" uncheckable>1 week</label>
    <label class="btn btn-default" ng-model="interval" btn-radio="4" uncheckable>2 weeks</label>
    <label class="btn btn-default" ng-model="interval" btn-radio="5" uncheckable>1 month</label>
    <label class="btn btn-default" ng-model="interval" btn-radio="6" uncheckable>3 months</label>
  </div>

Answer 1

您的代码似乎运行良好。

我注意到你似乎在使用 UI-Bootstrap，所以我在他们的 documentation 中分叉了他们的 Plunkr，展示了如何做到这一点。

查看使用您的代码的工作 Plunkr here。

HTML：

<h4>Radio &amp; Uncheckable Radio</h4>
<pre>{{interval || 'null'}}</pre>
<div class="btn-group">
  <label class="btn btn-default" ng-model="interval" btn-radio="1" uncheckable>1 day</label>
  <label class="btn btn-default" ng-model="interval" btn-radio="2" uncheckable>3 days</label>
  <label class="btn btn-default" ng-model="interval" btn-radio="3" uncheckable>1 week</label>
  <label class="btn btn-default" ng-model="interval" btn-radio="4" uncheckable>2 weeks</label>
  <label class="btn btn-default" ng-model="interval" btn-radio="5" uncheckable>1 month</label>
  <label class="btn btn-default" ng-model="interval" btn-radio="6" uncheckable>3 months</label>
</div>

控制器：

$scope.interval = 3;

$scope.$watch("interval", function() {
  console.log($scope.interval);
}, true);

需要明确的是，当您选择按钮时，此 $scope.interval 值会自动更新。所以你不必手动更新任何东西（这是使用 Angular 的主要好处之一）。因此，每当您需要执行 HTTP 请求时，只需访问 $scope.interval 值，它将是正确的值。

换句话说：您不需要$scope.$watch，除非您需要在所选按钮更改时执行更复杂的逻辑