AngularJS: I need to update a service from outside of angular

Question

I have a service called \'player\' and I need to update the service when a flash object is finished loading.

mySongPlayer.factory(\'player\', function() {

         


        

Answer 1

Well, I can't really see all of what you're doing, but you're probably about 1/2 way there.

Here is a working plunk of what I'm about to describe

injector.get() should be returning the same instance of Service as what's in your app. You're probably just seeing an issue that makes you think you have a different instance.

So what you need to do is:

• Make sure that what you're putting in your scope from your service is an object reference. If it's a primitive type, it won't be the same reference so it won't update.
• Be sure to get the scope off of your angular element with angular.element(DOMElement).scope() and then call $apply() on it.

Here's the code:

app.controller('MainCtrl', function($scope, myService) {
  // Set a var on the scope to an object reference of the
  // (or from the) service.
  $scope.myService = myService;
});

app.factory('myService', function(){
  return {
    foo: 'bar'
  };
});

//do a little something to change the service externally.
setTimeout(function(){
  //get your angular element
  var elem = angular.element(document.querySelector('[ng-controller]'));

  //get the injector.
  var injector = elem.injector();

  //get the service.
  var myService = injector.get('myService');

  //update the service.
  myService.foo = 'test';

  //apply the changes to the scope.
  elem.scope().$apply();
}, 2000)

Other thoughts:

• You probably want to inject $window into your service, rather than use the window object, to maintain the testability of your service.
• A directive is probably a better choice for DOM manipulation such as the creation of a Flash movie player.