Watcher not firing when contents of object changes

问题

Why is my $interval visibly refreshing the model?

I'm trying to automatically update the song that I'm playing right now and showing it on my website. For that, I used the $interval function. The problem is that the model (div) is refreshing every 10 seconds, while I want it only to refresh when the song changes (and just checking every 10 seconds)

I tried changing the $interval function with setInterval(), but no luck.

angular.module('lastfm-nowplaying', [])
.directive('lastfmnowplaying', ['uiCreation', 'lastFmAPI', 'lastFmParser', '$interval', function(uiCreation, lastFmAPI, lastFmParser, $interval){
  var link = function(scope, element, attrs){

      scope.$watch('config', function(value) {
        load();
      });

      var load = function(){
          function SongCheck(){
              var latestTrack;      
              if (scope.config){    
                  if (scope.config.apiKey){            
                      lastFmAPI.getLatestScrobbles(scope.config)
                      .then(function(data){    
                          latestTrack = lastFmParser.getLatestTrack(data);
                          angular.element(element).addClass('lastfm-nowplaying');
                          uiCreation.create(element[0], scope.config.containerClass, latestTrack);
                        }, function(reason) {
                          //Last.fm failure
                      });

                  }
                  else{
                      var latestTrack = {
                          title: scope.config.title,
                          artist: scope.config.artist,
                          largeImgUrl: scope.config.imgUrl,
                          xLargeImgUrl: scope.config.backgroundImgUrl,
                      }
                      angular.element(element).addClass('lastfm-nowplaying');
                      uiCreation.create(element[0], scope.config.containerClass, latestTrack);
                  }
              }
          }
          SongCheck();
          $interval(function () {
              SongCheck();
          }  , 8000);
      }
  };

  return {
       scope:{
            config: '=config'
       },
       link: link
  };
}])

The code works, but I want the model to change when a change is detected (in this case the json file).

回答1:

Watcher not firing when contents of object changes

Delete the $interval timer and use the "deep watch" version of the watcher:

  scope.$watch('config', function(value) {
    load(value);
  ̶}̶)̶;̶
  }, true);

Normally the watcher only fires when the object reference changes. Set the second argument to true to have the watcher fire when the object contents changes.

For more information, see

AngularJS Developer Guide - Scope $watch depths

来源：https://stackoverflow.com/questions/57337849/watcher-not-firing-when-contents-of-object-changes

标签

angularjs

last.fm