对象内容更改时观察者不触发

Question

为什么我的 $interval 明显刷新了模型？

我正在尝试自动更新我正在播放的歌曲并将其显示在我的网站上。为此，我使用了 $interval 函数。问题是模型 (div) 每 10 秒刷新一次，而我希望它只在歌曲改变时刷新（并且每 10 秒检查一次）

我尝试使用 setInterval() 更改 $interval 函数，但没有成功。

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
  };
}])

代码有效，但我希望在检测到更改时更改模型（在本例中为 json 文件）。

Answer 1

观察者在对象内容改变时不触发

删除$interval计时器并使用观察者的“深度观察”版本：

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

通常情况下，观察者仅在对象 reference 发生变化时触发。将第二个参数设置为 true 以在对象 contents 更改时触发观察器。

有关详细信息，请参阅

AngularJS Developer Guide - Scope $watch depths

对象内容更改时观察者不触发

Watcher not firing when contents of object changes

last.fm

angularjs

为什么我的 $interval 明显刷新了模型？

观察者在对象内容改变时不触发