How to track scope variable changing in AngularJS

Question

All:

I am new to AngularJS, current what I want to do is to figure out which line cause the $watch handling function get called.

For a small example:

I set $scope.name = "" and call a function changeName():

function changeName(){
    $scope.name = "new Name";
    ...

    $http.get("someurl")
         .then(function(data){ $scope.name = data.newname;   })
}

$scope.$watch("name", function(newName, oldName){
    handlingfunctionHere();
});

There is multiple changes to $scope.name which make $scope.$watch trigger, but when I debug in the chrome, I can not tell which action lead to that triggering from call stack, could anyone show me how to debug this?

Thanks

@PankajParkar Thanks, honestly I am too new to AngularJS to fully understand this, could you give an Example or fiddle? — Kuan
– Kuan, Commented Sep 10, 2015 at 17:09
but that doesn't give fully assurity from where value gets updating.. — Pankaj Parkar
– Pankaj Parkar, Commented Sep 10, 2015 at 17:15
you can use a different variable if you want to track when $scope.name changes after $http — batmaniac7
– batmaniac7, Commented Sep 10, 2015 at 17:19
@maddog Thanks, but what I want is like Pankaj Parkar said, I want to know where does that name variable get updated which leads to the triggering of $watch — Kuan
– Kuan, Commented Sep 10, 2015 at 17:23
@Kuan basically I was suggested you to use $parser & $formatters that does give an access to $viewValue & $modalValue stackoverflow.com/questions/22841225/… . But its not possible with this way.. — Pankaj Parkar
– Pankaj Parkar, Commented Sep 10, 2015 at 17:31

Community · Accepted Answer · 2017-05-23 12:22:07Z

3

Sorry that I will need to tell you this, maybe you will get disappointed because as you said you are new with AngularJS, but the real truth is that you cannot know with simple debugging as putting a breakpoint in the watch handler.

As a reference I will add this post from Misko itself where he explains how angular data binding works and what are the benefits and the drawbacks from it. This is one of the drawbacks that is not mentioned but still for me not a big deal because IMO the benefits are bigger.

This just makes the debugging harder because you will need to manually find all the places where change can be done and put a breakpoint there. It is also possible several changes to be done before the watch handler is called.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Sep 10, 2015 at 19:03

S.Klechkovski

4,04519 silver badges27 bronze badges

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

1 Comment

Kuan Over a year ago

Thanks, this is a very disappointed answer, but I will accept this truth until someone proposes a solution.

Collectives™ on Stack Overflow

How to track scope variable changing in AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related