对象内容更改时，观察者未触发 [英] Watcher not firing when contents of object changes

问题描述

为什么我的$ 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文件).

解决方案

对象内容更改时，Watcher不会触发

删除$interval计时器并使用"deep watch"(深度监视)观察者的版本:

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

通常，观察者仅在对象 reference 更改时才会触发.将第二个参数设置为true，以使观察者在对象 contents 更改时触发.

有关更多信息，请参见

• AngularJS开发人员指南-范围$watch深度

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).

解决方案

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

这篇关于对象内容更改时，观察者未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！