当为$范围。$申请必要的处理与角度的对象/数组？ [英] When is $scope.$apply necessary for dealing with objects/arrays with Angular?

问题描述

我用的SoundCloud JS SDK工作带给我的SoundCloud收藏夹成一个简单的角度应用程序。

我是不是能够得到用户的最爱，直到我用 $范围正确导入。$适用。

 函数TopListCtrl（$范围，$ HTTP，$模态）{
  $ scope.getData =功能（sc_user）{
     SC.get（'/用户/+ sc_user +'/收藏夹'，{限制：200}，功能（轨道）{
     $范围。$应用（函数（）{
  如果（Object.getOwnPropertyNames（轨迹）。长度大于1）{
      $ scope.likes =轨道;
      $ scope.sortField ='like.favoritings_count';
      $ scope.reverse = TRUE;
      $ scope.sc_user = sc_user;
     }
  其他{
      警报（该用户已0的SoundCloud喜欢，所以悲伤......）
     }
  }）错误（功能（数据，状态，头，配置）{
             警报（东西歪了这一要求仔细检查，这是一个真正的SoundCloud用户名。）;        }）
        }）;
  }
 

如果你不使用$ scope.apply，它不工作（并说没有定义SC.get）。

我想多了解一点更好，为什么 $范围。$适用是必要的。我问这个，因为当我只是使用HTTP API，我并不需要它。

 函数TopListCtrl（$范围，$ HTTP，$模态）{
  $ scope.getData =功能（sc_user）{
     VAR URL ='http://api.soundcloud.com/users/'+ sc_user +'/favorites.json?client_id=0553ef1b721e4783feda4f4fe6611d04&limit=200&linked_partitioning=1&callback=JSON_CALLBACK';
    $ http.jsonp（URL）.success（功能（数据）{
     如果（Object.keys（data.collection）。长度大于0）{
      $ scope.likes =数据;
      $ scope.sortField ='like.favoritings_count';
      $ scope.reverse = TRUE;
      $ scope.sc_user = sc_user;
     }
    其他{
      警报（该用户已0的SoundCloud喜欢，所以悲伤......）
     }
  }）错误（功能（数据，状态，头，配置）{
             警报（东西歪了这一要求仔细检查，这是一个真正的SoundCloud用户名。）;
        }）;
  }
 

解决方案

通常角知道对正在执行，因为你是一个提供功能回调code，但它的角度这实际上是调用它们。后角调用一个函数，它会调用$一段时间后申请触发$消化周期。

如果您不知道$消化周期是什么，这个概念很简单。在$消化阶段，角会做一个已经设定了一个$表处理程序，并检查它是否改变了每个范围的变量脏检查;如果有角将调用其相应的$表处理程序来更新视图。

再回到原来的问题 - 当角知道你的code，就会引发$消化周期为你 - 所以没有必要调用$明确应用。如果您处理一个jQuery的事件，这是一个不同的故事。角不知道，可能需要一个$摘要 - 怎么了？所以$敷需要手动触发$摘要。

I'm working with the Soundcloud JS SDK to bring my Soundcloud favorites into a simple Angular app.

I wasn't able to get the user favorites to import in correctly until I used $scope.$apply.

function TopListCtrl($scope, $http, $modal) {
  $scope.getData = function(sc_user) {
     SC.get('/users/'+ sc_user +'/favorites', {limit: 200}, function(tracks){
     $scope.$apply(function() {
  if (Object.getOwnPropertyNames(tracks).length > 1) {
      $scope.likes = tracks;
      $scope.sortField = 'like.favoritings_count';
      $scope.reverse = true;
      $scope.sc_user = sc_user;
     } 
  else {
      alert("That user has 0 Soundcloud likes. So sad...")
     }
  }).error(function (data, status, headers, config) {          
             alert("Something went awry with that request. Double check that's a real Soundcloud username");         

        })
        }); 
  }

If you don't use $scope.apply, it doesn't work (and says SC.get not defined).

I'd like to understand a bit better why $scope.$apply is necessary. I ask this because when I was just using the http api, I didn't need it.

function TopListCtrl($scope, $http, $modal) {
  $scope.getData = function(sc_user) {
     var url = 'http://api.soundcloud.com/users/'+ sc_user +'/favorites.json?client_id=0553ef1b721e4783feda4f4fe6611d04&limit=200&linked_partitioning=1&callback=JSON_CALLBACK';
    $http.jsonp(url).success(function(data) {
     if (Object.keys(data.collection).length > 0) {
      $scope.likes = data;
      $scope.sortField = 'like.favoritings_count';
      $scope.reverse = true;
      $scope.sc_user = sc_user;
     } 
    else {
      alert("That user has 0 Soundcloud likes. So sad...")
     }
  }).error(function (data, status, headers, config) {          
             alert("Something went awry with that request. Double check that's a real Soundcloud username");         
        });
  }

解决方案

Usually angular knows about the code that's executing because you're the one providing the function callbacks but it's angular that's actually calling them. After angular calls a function, it will call $apply sometime later to trigger a $digest cycle.

If you don't know what a $digest cycle is, the concept is simple. During the $digest phase, angular will do a dirty check on every scope variable that's been set up with a $watch handler and check if it's changed; if it has angular will call its the corresponding $watch handler to update the view.

Getting back to the original question - when angular knows about your code, it will trigger a $digest cycle for you - so there is no need to call $apply explicitly. If you handle a jquery event, that's a different story. Angular has no idea that a $digest might be needed - how can it? So $apply is needed to trigger the $digest manually.

这篇关于当为$范围。$申请必要的处理与角度的对象/数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！