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, Sep 10 '15 at 17:09
but that doesn't give fully assurity from where value gets updating.. — Pankaj Parkar, Sep 10 '15 at 17:15
you can use a different variable if you want to track when `$scope.name` changes after `$http` — batmaniac7, Sep 10 '15 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, Sep 10 '15 at 17:23
@Kuan basically I was suggested you to use `$parser` & `$formatters` that does give an access to `$viewValue` & `$modalValue` http://stackoverflow.com/questions/22841225/ngmodel-formatters-and-parsers . But its not possible with this way.. — Pankaj Parkar, Sep 10 '15 at 17:31
@PankajParkar Thanks, but I did not quite catch this, how this $parser and $formatter solve my problem about tracing back the trigger line? — Kuan, Sep 10 '15 at 18:44
@Kuan no that won't figured out your need..read my last comment carefully.. In short you can't define from where the scope variable gets updated.. — Pankaj Parkar, Sep 10 '15 at 19:02
@PankajParkar Thanks, I think I do not need that assurity, what I need is to know which updating leads to that $watch triggering, I do not need to make sure the triggering IS from specific updating. — Kuan, Sep 10 '15 at 20:24
@Kuan could you tell us exactly you want..there must be different way of doing this..\ — Pankaj Parkar, Sep 10 '15 at 20:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89328/discussion-between-kuan-and-pankaj-parkar). — Kuan, Sep 10 '15 at 20:27

score 3 · Accepted Answer · edited May 23 '17 at 12:22

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.

Thanks, this is a very disappointed answer, but I will accept this truth until someone proposes a solution. — Kuan, Sep 10 '15 at 20:26

How to track scope variable changing in AngularJS

1 Answers1