AngularJS 2 voies de liaison non mise à jour

Question

J'ai récemment essayé à AngularJS avec cette gamme curseur directif:

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

Il a bien fonctionné en utilisant le décrit alors que je suis en utilisant le modèle de données seulement à l'intérieur ma page HTML. Mais lorsque j'essaie d'utiliser le modèle dans le contrôleur correspondant, je n'ai pas obtenu la valeur réelle mais la valeur initiale que j'ai définie lors de l'initialisation dans le contrôleur.

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

Avec cela, je suis en train d'obtenir une lame qui glisse entre date en millisecondes avec des étapes quotidiennes. J'analyse les valeurs modifiées dans un nouvel objet Date() et je veux l'imprimer. Le problème est que je n'ai toujours que les valeurs initialIntervalStart/End au lieu du contenu réel du curseur. Mais quand j'utilise {{initialIntervalEnd}} au lieu de {{chosenIntervalEnd}}, je change de valeur quand je change de curseur. Donc, il ne met à jour que sur 1 partie de la liaison de données 2-way.

J'ai essayé de mettre à jour le contrôleur avec

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

et même avec digest $, mais il n'a pas fonctionné.

J'ai essayé aussi d'utiliser un veilleur sur la nouvelle variable dans mon contrôleur, mais sans résultats ainsi:

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

Quand j'utilisait digérer $ et appliquer $, je ne suis arrivé erreurs de mon navigateur. Savez-vous comment je peux forcer ce 2-way-liaison?

Savez-vous comment je peux forcer cette liaison bidirectionnelle?

Cordialement,

Deleadon

Answer 1

Vous devez envelopper votre timeIntervalStart dans un objet pour que puisse le regarder angulaire comme il est censé. N'oubliez pas que vous ne devez pas lier directement les modèles aux primitives lorsque vous avez besoin de les mettre à jour et de les surveiller. Selon le comportement de la directive, vous n'avez peut-être pas besoin de cela, mais pour éviter les maux de tête lorsque vous vous attendez à ce que la liaison bidirectionnelle fonctionne correctement, enveloppez les primitives dans un objet à l'intérieur de la portée.

$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); 
}; 

Et le code 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>