javascript - AngularJS 2 路绑定(bind)未更新

Question

我最近尝试了 angularJS 和这个 range-slider-directive:

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

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

Controller .js

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();
}])

html

<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>

通过这个，我试图获得一张幻灯片，该幻灯片可以在以毫秒为单位的日期和每日步骤之间滑动。我正在解析新 Date() 对象中更改的值并希望将其打印出来。

问题是，我总是只获得初始间隔开始/结束值，而不是 slider 的实际内容。 但是，当我使用 {{initialIntervalEnd}} 而不是 {{chosenIntervalEnd}} 时，当我更改 slider 时，我会得到更改的值。因此它仅更新 2 路数据绑定(bind)的 1 部分。

我尝试使用

更新 Controller

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

和 与 $digest 相同，但它不起作用。

我还尝试在 Controller 中的新变量上使用观察程序，但也没有结果:

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

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

你知道我如何强制进行这种双向绑定(bind)吗？

亲切的问候，

德莱顿

Answer 1

您应该将 timeIntervalStart 包装在一个对象中，以便 Angular 可以按预期观看它。

请记住，当您需要更新和监视模型时，不应将模型直接绑定(bind)到基元。根据指令行为，您可能不需要这样做，但为了避免当您希望 2 路绑定(bind)正常工作时出现麻烦，请将基元包装在作用域内的对象中。

$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>