Angular watch array in service

Question

I'm trying to watch an array in a service and really struggling.

The Service

angular.module('starter.entities',[]).service('Entities', function() {
var _entities = this;

// public API
 this.locations = [];

 document.body.addEventListener("dbready", function(){
  buildModel(function(locations) {
    _entities.locations = locations;
   });
 });

The Controller

  .controller('DashCtrl', function($scope, Entities) {

    $scope.$watch(function() { return Entities.locations }, function() {
     doSomething...
   }, true);

.....

Bascially it's loading data in a database and I want to update the UI when the data is loaded.

The watch function is called when the first loading happens, but not when the data load happens.

Is there an easy way to get the $watch happening?

georgeawg · Accepted Answer · 2016-08-23 17:53:08Z

1

Events that come from outside the AngularJS framework need to notify the framework of changes to the model with $apply.

app.service('Entities', function($document, $rootScope) {
    var self = this;

    // public API
    this.locations = [];

    $document.find("body").on("dbready", function(){
      buildModel(function(locations) {
        self.locations = locations;
        //Use $apply to notify AngularJS framework
        $rootScope.$apply();
    });

});

For more information, see AngularJS $rootScope.scope API Reference -- $apply.

answered Aug 23, 2016 at 17:53

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

Collectives™ on Stack Overflow

Angular watch array in service

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related