Monitor global variable from AngularJS

Question

I want to constantly monitor the value of a global variable from Angular. I have a flash movie which records microphone data and pushes this out to the global variable. I reference this variable from Angular like this:

$scope.audioData = $window.audioData;
$scope.$watch('audioData', function() {
    console.log("audio in angular!:", $scope.audioData.length);
});

and in the HTML I've put:

<h1>{{audioData.length}}</h1>

In the HTML I can see that the audio data is changed after I recorded, but the watch function is not being called while it's recording, which I need to stream the audio to a server.

watch audioData.length, or use the third parameter to $watch. — Yoshi
– Yoshi, Commented May 3, 2013 at 11:48
Unfortunately this doesn't work. The function is still only being called after the recording is stopped (button is clicked). — dndr
– dndr, Commented May 3, 2013 at 11:54

Supr · Accepted Answer · 2013-05-03 11:57:58Z

2

There are two things to keep in mind here.

The first is that $watch by default only watches the identity of objects and array, so it doesn't notice if there are changes inside the value. This can be solved by watching the length or using the third argument as Yoshi has mentioned.

The second thing to remember is that Angular will only check its watches when something triggers it. If nothing is happening in Angular-world, then no watches or callbacks will be executed. Since your recorder lives outside of the Angular-world, it needs to notify Angular that something has been changed. This can be done by calling $apply occasionally after updating the recording. An alternate way to consider is to just have Angular update at regular intervals by using $timeout.

answered May 3, 2013 at 11:57

Supr

19.1k3 gold badges33 silver badges37 bronze badges

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

2 Comments

dndr Over a year ago

Thanks, this works! Is it also possible to directly call a function on the scope of the controller outside of angular? If I retrieve the scope with angular.element(e).scope(), where e is the top element that gets loaded inside ng-view, I cannot seem to be able to call the functions within the assigned controller.

Supr Over a year ago

@JoostVanDoremalen Not sure, but maybe $eval() can help you. The proper solution though is to wrap all this stuff in a directive, but that's a little more work, especially if you're not used to doing it yet.

Collectives™ on Stack Overflow

Monitor global variable from AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related