2

I'm experiencing a strange behaviour, but I don't know who's fault it is.

I have three variables in $scope that can be changed by the user. They are bind to a select object through ng-model.

<select ng-options="hour.label for hour in hours track by hour.val" ng-model="new_hour"></select> HH :
<select ng-options="minute.label for minute in minutes track by minute.val" ng-model="new_minute"></select> MM :

<br />

new_hour = {{ new_hour }}<br />
new_minute = {{ new_minute }} </br>

where the variables are initialized as follows:

$scope.minutes = [];

for(var i = 0; i < 60; ++i)
{
    var min = String(i);
    if(i < 10)
    min = "0" + min;

    $scope.minutes.push({ val: i, label: min});
}

$scope.hours = $scope.minutes.slice(0, 24);

$scope.new_minute = $scope.minutes[0];
$scope.new_hour = $scope.hours[0];

Whenever I choose a different time, the values of $scope.new_hour and $scope.new_minute change immediately as expected.

However, I have also a button that has a ngClick and calls some function in the $scope.

<button ng-click="add_value()">Add value</button>

If I select a new (minute) value and then click on the button, then the $scope function sees the old values and not the new ones:

$scope.add_value = function()
{
    console.log("new_minute: " + $scope.new_minute.val);
}

Let's say I've chosen 03 and then click on the button. The console shows new_minute: 0.

However, if I modify my code:

<button ng-click="add_value(new_minute.val)">Add vaue</button>

and

$scope.add_value = function(new_minute)
{
    console.log("new_minute: " + new_minute);
}

Then the value passed to add_value is always correct. I if open the inspect console and inspect the value of $scope.new_minute.val, then $scope.new_minute.val differs from the local variable new_minute.

I've prepared a fiddle with the basic structure of my code: https://jsfiddle.net/shaoran/tnvou6ud/1/

There everything works as expected, I honestly cannot reproduce this behaviour. Has anybody any idea what might be going on?

Pablo
  • 13,271
  • 4
  • 39
  • 59
  • It might be helpful to share all your view and controller code, since fiddle works as expected with the present code then the bug might be somewhere else. – korteee Sep 12 '17 at 15:53
  • I'd love to, but this not my private code (it's a project of my company, and I don't have permission to show all the code) and there is a lot of code involved. I'd try to compress the code as best as I can and post a new fiddle. It'll take me a couple of hours though :( – Pablo Sep 12 '17 at 16:09
  • 1
    I wonder if there is a `$scope` issue going on - I ran into a similar issue with some parent and child `$scope`. Is the `$scope` you're dealing with here within another `$scope` with similarly named variables? I've since moved away from using `$scope` and almost exclusively use `ctrl as` syntax - it makes it much clearer and helped clear up these types of issues. https://toddmotto.com/digging-into-angulars-controller-as-syntax/ – Nathan Beck Sep 12 '17 at 19:45
  • I think that there are different scopes, actually. I put as debug `$id = {{ $id }}` in the view and the id was different on the view than `$scope.$id` when I did `console.log($scope.$id)` inside the `ngClick` handler. It seems weird, everything else seem to be working just fine. – Pablo Sep 12 '17 at 21:05
  • @NathanBeck you gave me a great idea! In my previous `$scope.add_value` function I changed the line from `$scope.new_minute.val` to `this.new_minute.val` and with this I have the correct new value. I think that it might be some problems with the scopes, because I use many nested directives, some with `transclude: true`. The funny thing is that so far I haven't encountered any similar error, even though I initialize the `$scope`-variables at the same place. I cannot post my original code here, but I'll try to write a fiddle with the same structure and see if I can reproduce it. – Pablo Sep 12 '17 at 21:33
  • Awesome - if you can reproduce with a fiddle I'd be interested to see why the $scopes aren't playing nice. `$scope` is deprecating as of Angular 2 anyway, might be more helpful to go with `ctrl as` and start using `var ctrl = this;` type syntax now. https://stackoverflow.com/questions/16619740/should-i-use-this-or-scope has a link to a great read https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/ – Nathan Beck Sep 14 '17 at 19:33

0 Answers0