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

时间:2015-04-21 16:37:37

标签: javascript angularjs

可能是一个新手问题。

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

我尝试使用$ scope。$ watch(就像在代码段中一样),但它只在页面加载时触发。 此外,我尝试使用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>

1 个答案:

答案 0 :(得分:1)

您的代码似乎运行正常。

我注意到你似乎在使用UI-Bootstrap,所以我将他们的Plunkr分解为如何在他们的documentation中执行此操作。

查看使用您的代码的工作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,除非你选择的按钮改变时需要做更复杂的逻辑