$watch a variable for change angularjs

Question

I'm new to complex angular directives. I have a variable in the rootScope called $root.page. I have set up a watch like so:

$scope.$watch(
  "$root.page",
  function handleChange( newValue, oldValue ) {
    //show the select page only on page change

    console.log(oldValue, newValue);

    if (!oldValue || oldValue !== newValue) {
      $scope.showSelectOnly = true;
    }
  }
);

The way my code is currently structured, $scope.showSelectOnly is always true. I only want $scope.showSelectOnly to be true when there is a change to $root.page and I want it to be false in all other cases (i.e. when there is no change to the $root.page variable).

What about adding else statement and assigning false value to $scope.showSelectOnly ? — van
– van, Commented Feb 5, 2016 at 18:29
I literally just tried that 2 minutes ago and it worked. I didnt' realize $watch worked like that and you could check for 'non-changes' also. I guess this is the case for $watch over ng-change? — devdropper87
– devdropper87, Commented Feb 5, 2016 at 18:35
I'm get the logic but I don't get the use-case. What are you trying to achieve from the User eXperience? There may be a better approach to this. — jusopi
– jusopi, Commented Feb 5, 2016 at 18:56
Thought I answered earlier, sorry. there are three columns. in the first there are two sections that group cases of work items. when you click on either, a list of items shows up respective to each case, in the second column. In the third column, I want a div with "Select an item" to show up. whenever you click anywhere in the first column, I want the 'select an item' to show up in the third column. otherwise, no need for that div. I ended up solving this with $rootScope so I'm still looking for good answers — devdropper87
– devdropper87, Commented Feb 5, 2016 at 20:33

dannielum · Accepted Answer · 2016-02-18 15:55:01Z

1

I don't think you need a watch for this case. You might want to look into using angular value instead. You have access to angular value in your entire angular module app. With that, you can just update showSelectOnly when page is changed.

angular.module('myApp', [])
  .value('page', true)
  .value('showSelectOnly', true);

You can then inject page into any controller in your module, and update both values as needed.

angular.module('myApp')
  .controller('myCtrl', function (page, showSelectOnly) {
      if (!page) {
         showSelectOnly = true;
      }
  });

edited Feb 18, 2016 at 15:55

answered Feb 5, 2016 at 18:34

dannielum

3561 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jusopi Over a year ago

I believe the value should be a hash with the key "page" & "showSelectOnly" otherwise they will have to go through a rather indirect processes for changing the construct stored in the value.

ofir fridman · Accepted Answer · 2016-02-05 18:45:35Z

0

Here is the code you need:

demo

HTML:

<div ng-app="app" ng-controller='myCtrl as vm'>

  <button ng-click="$root.page = 1">Change root Page</button>
  <label>
     showSelectOnly: {{showSelectOnly}}
  </label>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

javascript:

angular.module('app', [])
 .controller('myCtrl', function($scope) {
  var vm = this;
  $scope.showSelectOnly = false;

  $scope.$watch(
    "$root.page",
    function handleChange(newValue, oldValue) {
      if (newValue !== oldValue) {
        $scope.showSelectOnly = true;
      }
    }
  );
})

answered Feb 5, 2016 at 18:45

ofir fridman

2,7892 gold badges20 silver badges27 bronze badges

3 Comments

devdropper87 Over a year ago

Your demo replicates my problem :) I clicked the button once and it stayed at true forever, it didn't go back to false once there was no change

ofir fridman Over a year ago

the first state is false then you click the button the state is change and it set to true. do you want it to change to false in case another click done?

devdropper87 Over a year ago

Yep, as I mentioned in my question, I want it to be false in all other cases (i.e. when there is no change to the $root.page variable).

Collectives™ on Stack Overflow

$watch a variable for change angularjs

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related