How to find the call site that changed the viewed object

Question

AngularJS allows you to listen to object changes and call the callback function supplied with the $ watch function. With a fairly large library that uses AngularJS, such as ngGrid objects, they often change so that they "look."

Once the callback call is called, how can you track the call site that caused the change to the object?

Not knowing what caused the change, and therefore caused the call to the clock handler, it is very difficult to debug a library such as ngGrid. I set breakpoints wherever I can anticipate that a variable can be changed, and then try to plot the execution pipeline to keep track of the chain of events that cause the object to change.

Answer 1

You just can't do it. $watchjust add a callback to check if the object that should be executed during digests has changed.

I assume that one of the main differences from frameworks, such as Backbonewhere you extend the object Model.

In this case, you may need to intentionally (t23) intentionally (update the model and launch observers), but this is a stretch ...

Update

The problem is that you think there is a correlation between the watch and the model changes, but just not. Adding a clock just adds something to check when starting the digest cycle.

This cycle is not caused by changes in something on $scope, but rather calls $scope.$applyor directly calls $scope.$digest.

, (?) Angular $scope.$apply . , , $timeout ngClick , , $scope.$apply .

II

, - ?

$scope.foo = {
  get bar () { return getting(); },
  set bar (value) { setting(value); }
};

var bar;

function setting (value) {
  var stack = getStack();
  console.log(value, stack);
  bar = value;
}

function getting () {
  console.log(getStack());
}

function getStack () {
  try {
    throw new Error('foo');
  } catch (e) {
    return e.stack || e;
  }
}

Answer 2

, , , , , , , .

, javascript name, , .

, , :

• name name_
• getter: get name() { return this.name_ ; }
• : set name(value) { this.name_ = value ; }
• .

:

:

scope = {
    name:'',
};

, :

scope = {
    name_:'',
    get name() { return this.name_; },
    set name(value) {
        this.name_ = value;
        alert('Changed!');
    },
};

, !