CODEWITHSUNDEEP
javascriptangularjs
Java User
Java User

Reputation: 127

$watch function is not getting triggered

I have a service which returns reponse. In response I have count of Users. I have a var userCount and I have a watch() on this userCount var. 

               var userCount=null;
          var eventPromise = userSer.load(query, deviceType,$scope.duration);
            eventPromise.then(function(response) {
                console.log(response)
                var dataLength = response.users.length;
                $scope.numberOfRecords = dataLength;

                if(dataLength > 0){                       
                   userCount = response.beaconCount;
                   setUserCount(userCount);
                  }

              var setUserCount=function(data){
            userCount=data;
        };
                var getUserCount=function(){
            return userCount;
           }

// This $watch function is not getting trigger as we are changing value of userCount from null to response.userCount.

            $scope.$watch(userCount, function(newVal){
            alert("M in watch func");

              $scope.gridOptions.columnDefs[0].displayName = 'Beacon(' + getUserCount() + ')';
              $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);


        })

Upvotes: 0

Views: 206

Answers (2)

Pengyy
Pengyy

Reputation: 38171

You have messed up the usage of $scope.$watch, the correct usage of $scope.$watch is as below, refer docs here:

Usage1: watching changes of variable belongs to $scope.

$scope.userCount = null;
$scope.$watch("userCount", function() { ... });

Usage2: watching changes of variable not belongs to $scope.

var userCount = null;
$scope.$watch(function() { return userCount; }, function() { ... });

refer the below example.

angular.module("app", [])
  .controller("myCtrl", function($scope, $timeout) {
    $scope.data = null;
    var data2 = null;
    
    $scope.$watch("data", function() {
      console.log("data change detected.");
    });
    
    $scope.$watch(function() { return data2; }, function() {
      console.log("data2 change detected.");
    });
    
    $timeout(function() {
      $scope.data = {id: 1};
      data2 = {id: 2};
    }, 2000);
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  
</div>

Upvotes: 1

Vladimir Zdenek
Vladimir Zdenek

Reputation: 2290

You cannot $watch any variable like this. Assign the userCount variable to $scope and it will work.

$scope.userCount = null;

userSer.load(query, deviceType, $scope.duration).then(function (response) {

    console.log(response);

    var dataLength = response.users.length;
    $scope.numberOfRecords = dataLength;

    if (dataLength > 0) {
        $scope.userCount = response.beaconCount;
    }

});

Upvotes: 1

Related Questions