Question

我最近尝试使用angularJS和range-slider-directive：

https://github.com/supertorio/angular-rangeslider-directive

在我的HTML页面中使用数据模型时，使用描述的方法很好。但是当我试图在相应的控制器中使用该模型时，我没有得到实际值，而是在控制器初始化期间设置的初始值。

controllers.js

＆＃13;

app.controller('modelViewCtrl',['$scope','$http','$routeParams', function($scope,$http,$routeParams) {
  $scope.modelId = $routeParams.modelId;
  $scope.timeIntervalStart = new Date().getTime() - (1000*60*60*24*30);
  $scope.timeIntervalEnd = new Date(1452240488000).getTime();
  $scope.initialIntervalStart = 1452240488000 - (1000*60*60*24*30);
  $scope.initialIntervalEnd = 1452240488000;
  $scope.updateInterval = function () {
    console.log("update: " + $scope.initialIntervalEnd);
    $scope.chosenIntervalStart = new Date($scope.initialIntervalStart);
    $scope.chosenIntervalEnd = new Date($scope.initialIntervalEnd);
  }
  $scope.updateInterval();
}])

＆＃13;

HTML

＆＃13;

<div class="panel-heading">
  {{chosenIntervalStart}}
  <div range-slider
       floor={{timeIntervalStart}}
       step=86400000
       ceiling={{timeIntervalEnd}}
       ng-model-low="initialIntervalStart"
       ng-model-high="initialIntervalEnd"></div>
  {{chosenIntervalEnd}}
</div>

＆＃13;

有了这个，我试图得到一张幻灯片，它以毫秒为单位在日期和日常步骤之间滑动。我正在解析新的Date（）对象中的更改值，并希望将其打印出来。

问题是，我总是只获取initialIntervalStart / End值而不是滑块中的实际内容。但是当我使用{{initialIntervalEnd}}而不是{{chosenIntervalEnd}}时，我会在更改滑块时更改值。所以它只更新了2路数据绑定的1部分。

我尝试用

更新控制器

$scope.$apply(function() {
  //code to update data
});

和与$ digest相同，但它没有奏效。

我还尝试在我的控制器中对新变量使用观察器，但也没有结果：

$scope.$watch('initialIntervalStart', function(oldVal,newVal) {
  //was only once applied, while initial loading the page
}

当我使用$ digest和$ apply时，我只是从浏览器中收到错误。

你知道我怎么能强制这种双向约束吗？

亲切的问候，

Deleadon

Answer 1

你应该将timeIntervalStart包裹在一个物体中，以便角度可以按照预期的那样观察它。

请记住，当您需要更新和观看模型时，不应直接将模型绑定到基元。根据指令行为，您可能不需要这样做，但为了避免在预期双向绑定正常工作时出现问题，请在范围内的对象中包装基元。

$scope.timer = {
    timeIntervalStart: new Date().getTime() - (1000*60*60*24*30),
    timeIntervalEnd: new Date(1452240488000).getTime(),
    initialIntervalStart: 1452240488000 - (1000*60*60*24*30),
    initialIntervalEnd: 1452240488000
};

$scope.updateInterval = function () {
    console.log("update: " + $scope.initialIntervalEnd);
    $scope.timer.chosenIntervalStart = new Date($scope.timer.initialIntervalStart);
    $scope.timer.chosenIntervalEnd = new Date($scope.timer.initialIntervalEnd);
};

和html

<div class="panel-heading">
  {{timer.chosenIntervalStart}}
  <div range-slider
       floor={{timer.timeIntervalStart}}
       step=86400000
       ceiling={{timer.timeIntervalEnd}}
       ng-model-low="timer.initialIntervalStart"
       ng-model-high="timer.initialIntervalEnd"></div>
  {{timer.chosenIntervalEnd}}
</div>

AngularJS双向绑定不更新

1 个答案: