Using $scope on plugin call back

1

I am using a plugin with a command:

NetworkConnection.prototype.startStream = function (successCallback, failureCallback)
{
    exec(successCallback, failureCallback, "NetworkStatus", "startStream", []);
}

Then i exec the command:

.controller('EEGSessionCtrl', function ($scope, $stateParams) {
$scope.active = function () {   navigator.connection.startStream(
            function (info) {
                $scope.ExtraData = "3";
...
}

when the successCallback is called (from the plugin), the $scope.ExtraData is not updating the html…

2

that is because if you execute something async outside of the angular context (like native javascript events) angulars watcher does not recognize any changes. Wrap $scope.ExtraData = "3"; in a $timeout call and it should work.

3

Thanks bengtler
I ended up updating the text using: document.getElementById(‘ExtraDataDiv’).innerHTML = “…” ;
Is there downside for this approach?

4

it is ugly and slow^^. You should avoid such things in professional js webdevelopment. Because you are manipulating the dom from somewhere. If you need to manipulate a special part of a page --> you should write directives in angular. They want you to not have access to the whole dom from everywhere. that is the reason they are using jqlite and not the full jquery lib. :wink: