0

私は最初の Angular プロジェクト (rails gem バージョン 1.2.16) に取り組んでいますが、$q を正しく使用する方法がわかりません。

クリックすると次のディレクティブがあります。 1. $http 要求を実行するためにファクトリ関数を呼び出すディレクティブ関数を呼び出します。 2. ページに追加されたテンプレートで、ディレクティブ関数 / $http からの応答を使用します。

指令：

d2jive.directive('getSpotifyTracks', ['spotifyFactory', '$compile', '$sce', '$q',
 function (spotifyFactory, $compile, $sce, $q) { 
  'use strict';

  var getTracks = function(artistName){
    var deferred = $q.defer();
    var spotifyTracks = spotifyFactory.getArtistTracks(artistName)
    deferred.resolve(spotifyTracks);
    return deferred.promise;
  }


  return {
    scope: {
      artistName: '@'
    },
    compile: function(tElement, tAttrs, artistName){

      return function(scope, iElement) {
        iElement.click(function(){

          var tracks = getTracks(scope.artistName);
          tracks.then(function(tracks){
            var t = '<iframe src="https://embed.spotify.com/?uri=spotify:trackset:Playlist:"' + tracks.spotifyTracks+ 'width="300" height="300" frameborder="0" allowtransparency="true"></iframe>';
            iElement.after($compile(t)(scope));
          });
        });
      }
    }
  }

}]);

工場：

d2jive.factory('spotifyFactory', ['$http','$q', function($http, $q){

  var factory = {}

  factory.getArtistTracks = function(artistName){

    var tracks = {}

    var spotifyUrl = "http://ws.spotify.com/search/1/track.json?q=";

    var deferred = $q.defer();

    var getTracks = function(artistName){
      $http.get(spotifyUrl + encodeURIComponent(artistName))
        .success(function (data) {
          deferred.resolve(data);
        });
      return deferred.promise;
    };


    // tracks.spotifyTrakcs = getTracks(artistName);
    var spotifyTracks = getTracks(artistName);
    spotifyTracks.then(function(result){
        var trackArray = [];
        var tracks = result.tracks.slice(0,9);
        for (var track in tracks){
          grabbedTrack = tracks[track].href.slice(
            14, tracks[track].href.length);
          trackArray.push(grabbedTrack);
        }  
      tracks.spotifyTracks = trackArray;  
      console.log(tracks.spotifyTracks); 
    });

    return tracks;

  }


return factory;


}]);

HTML:

<div class="eventContainer row" ng-controller="VenueResultsCtrl">
  <div ng-repeat="event in events">
    <h4>
      {{event.displayName}} 
    </h4>
    <p>
      <a href="{{event.uri}}" target="_blank"> Buy Tickets</a>
    </p>
    <div ng-repeat="artist in event.performance">
      <button get-spotify-tracks artist-name="{{artist.displayName}}">Discover 
        {{artist.displayName}}<br> -- {{artist.billing}}</button><br><br>
      <div class='spotify'></div>
    </div>
  </div>
</div>

問題: ファクトリ関数が応答を返す前に、テンプレートが読み込まれます。

私の解決策: ディレクティブでファクトリを呼び出す関数を作成し、テンプレートを追加する前に $q を使用して応答を待機しようとしましたが、機能していないようです。

ヒントやリードは大歓迎です、ありがとう！

4

2 に答える 2

1

これに似たものを使用して動作させることができると思います：

d2jive.factory('spotifyFactory', function($http){
    var spotifyFactory = {

      var spotifyUrl = "http://ws.spotify.com/search/1/track.json?q=";

      getTracks: function(artstName){
         var promise = $http.get(spotifyUrl + encodeURIComponent(artistName))
                       .then(function (result){
           //this is where you modifiy the results
           var tracks = result.tracks.slice(0,9);
           for (var track in tracks){
              grabbedTrack = tracks[track]
                             .href.slice(14,tracks[track].href.length);
              trackArray.push(grabbedTrack);
           }  
           tracks.spotifyTracks = trackArray;  
           console.log(tracks.spotifyTracks);
           return tracks
         });
         return promise;
     });
     return spotifyFactory
});

そして、コントローラー/ディレクティブで、この関数を次のように呼び出します

spotifyFactory.getTracks(someArtist).then(function(d) {
   $scope.data = d;
});
于 2014-05-09T00:28:09.580 に答える