Recently, I experimented with angularJS in conjunction with a range-slider-directive that can be found here:
https://github.com/supertorio/angular-rangeslider-directive
Initially, everything worked well while using the data-model solely within my HTML page. However, when attempting to access the model in the corresponding controller, I encountered an issue where I was only able to retrieve the initial value set during initialization in the controller, rather than the current actual value.
In my controllers.js file:
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();
}])In my html file:
<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>The intention here is to implement a slider that manipulates dates in milliseconds with daily increments. The values are converted to new Date objects and displayed accordingly.
The problem lies in the fact that I am consistently retrieving the initialIntervalStart / End values instead of the real-time content from the slider. When replacing {{chosenIntervalEnd}} with {{initialIntervalEnd}}, the values update as expected when changing the slider position. It appears that the two-way data binding is only functioning partially.
I attempted to rectify this by implementing:
$scope.$apply(function() {
//code to update data
});
and employing $digest, but these measures proved ineffective. Furthermore, setting up a watcher on the new controller variable also did not yield any positive results:
$scope.$watch('initialIntervalStart', function(oldVal,newVal) {
//was only once applied, while initial loading the page
}
When utilizing $digest and $apply, errors were triggered in the browser.
If you have any suggestions on how to enforce full two-way data binding in this scenario, please let me know!
Best regards,
Deleadon