有角度的API調用和承諾

我正在開發一個角度應用程序，並且有一個非常簡單的操作。基本上，我正在呼叫soundcloud api，抓住我的音軌，然後循環播放這些音軌，並抓取iframe嵌入對象，將其注入軌道對象，然後將整個事件作爲承諾解析並存儲在$ scope.soundcloud對象。只是fyi，第二次SC調用是生成小部件html所必需的。我希望它不是，但它是哈。有角度的API調用和承諾

這一切happends理所應當，我可以看到在$範圍的對象。我的模板拾取初始數據（主軌道數據），console.logging對象顯示軌道和嵌入數據，但模板從不會看到嵌入數據。

所以，從根本上，如何讓我的模板，以查看嵌入的數據，所以我可以用一個指令或NG綁定，HTML使用它呢？以下是我的所有代碼，請詢問是否需要更多信息！非常感謝你。

HTML

<div class="track" ng-repeat="track in soundcloud.tracks"> 
    <div class="front"> 
     <img src="app/img/loading.gif" /> 
    </div> 
    <div class="back" ng-bind-html="{{track.oembed}}"> 
    </div> 
</div>

角服務

 getTracks: function(){ 
      var deferred = $q.defer(); 
      var promise = deferred.promise; 

      SC.get("/me/tracks", function(tracks){ 
       $.each(tracks, function(k, v){ 
        if(v.sharing != 'private'){ 
         SC.oEmbed(v.uri, function(oembed){ 

          v.oembed = $sce.trustAsHtml(oembed.html); 

         }); 
        } else { 
         v.oembed = null; 
        } 
       }); 
       deferred.resolve(tracks); 
      }); 


      return $q.all({tracks: promise}); 
     }

角控制器

.controller("GridCtrl", ['$scope', 'Soundcloud', function($scope, Soundcloud){ 

     // Init the Soundcloud SDK config 
     Soundcloud.initialize(); 

     // Get the tracks from soundcloud 
     Soundcloud.getTracks().then(function success(results){ 

      // Store tracks in the $scope 
      $scope.soundcloud = results; 
      console.log(results); 

     }); 


    }]);

來源

2014-03-01 Shan Robertson

您是否嘗試過包裝的$申請？ '$ scope。$ apply（function（）{$ scope.soundcloud = results;}）;'？ –

我以前有過但沒有寫過它，但每次我收到「錯誤：[$ rootScope：inprog] $ digest已在進行中」。有什麼建議麼？ –

看起來像別的東西是錯的，嘗試關閉$ sceProvider並查看問題是否來自那裏？ –

嘗試創建一個像這樣的指令：

app.module('yourModule').directive('embedTrack', function() { 
    return function(scope, elem, attr) { 
     elem.replaceWith(scope.track.oembed); 
    }; 
});

然後你使用這樣的：

<div class="track" ng-repeat="track in soundcloud.tracks"> 
    <div class="front"> 
     <img src="app/img/loading.gif" /> 
    </div> 
    <div class="back"> 
     <div embed-track></div> 
    </div> 
</div>

如果你希望把它作爲該指令的屬性，你需要使用ATTR $觀察，以確保您的插值後獲得的價值。

<div embed-track={{ track.oembed }}></div>

該指令將被：

app.module('yourModule').directive('embedTrack', function() { 
    return function(scope, elem, attr) { 
     attr.$observe('embedTrack', function(value) { 
      elem.replaceWith(value); 
     }); 
    }; 
});

來源

2014-03-03 16:49:59

謝謝你的回覆！我會在今天下班回家後立即嘗試這個功能，這個$ observe功能看起來應該是我應該知道的，在這種情況下，將會對它進行閱讀。 –

所以我得到了這個指令的工作，但只有原始數據的uri，我可以隨時看到...仍然無法看到oembed道具，但我想我會繼續前進，因爲這現在可行... 感謝你的幫助。 –

您可能需要在服務中將'v.oembed = $ sce.trustAsHtml（oembed.html）;'更改爲'v.oembed = oembed.html;'以使其使用'oembed'屬性來工作，因爲這個指令的工作方式。 –

有角度的API調用和承諾

回答

相關問題