Angular: how to update non-angular javascript variable in response to a change of scope model?

Question

I've a huge jQuery plugin with domain logic from a third-party team and I really don't want to mess with its guts. This plugin exposes an object called browser to the global namespace.

I have a simple Angular controller. I made it $watch() the changes of browser (using object equality, not referential equality) and update the scope accordingly:

$scope.$watch(browser, function(newValue, oldValue, scope) { scope.browser = newValue; }, true);

Fine, but now I need to do the reverse: I need to update the global browser object when $scope.browser model changes in the course of Angular's $digest loop. How do I do that?

Probably, I need to create a custom hook to Angular's dirty-checking loop. I understand, that this is a bad approach and that the whole point of two-way binding was to avoid these manual callbacks, but I just can't figure out a better solution.

I think it will be helps to you : stackoverflow.com/questions/11873627/… — Ramesh Rajendran
– Ramesh Rajendran, Commented Jan 24, 2017 at 11:30
@RameshRajendran Thank you. Yes, I understand that any changes of scope from non-angular event handlers should be wrapped by $apply() call. But this is a different case, I believe, I need to create a custom hook for Angular's dirty checking loop. And I understand, this is an abuse and bad design and Angular was created to avoid this, but can't figure out a better solution anyways. — Boris Burkov
– Boris Burkov, Commented Jan 24, 2017 at 11:36

Ramesh Rajendran · Accepted Answer · 2017-01-24 11:39:53Z

0

Simply you can reverse back as the same way

$scope.$watch("browser", function(newValue, oldValue, scope) { browser = newValue; }, true);

answered Jan 24, 2017 at 11:39

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

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

1 Comment

Boris Burkov Over a year ago

So, you mean that by watching browser, Angular will automatically change it, if, for example, some directive modified it in UI? So, essentially, browser works as if it were a part of $scope? Cool, but how can I let directive access browser variable, it's out of $scope?

Collectives™ on Stack Overflow

Angular: how to update non-angular javascript variable in response to a change of scope model?

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