將Javascript對象轉換爲Angular JS中的字符串

Question

我是angularJS的新手，我在下面的代碼中遇到了一些問題。基本上，我試圖實現的目標是搜索Spotify API中的詞彙並檢索給予我的第一個播放列表，然後抓取播放列表的URI並將其連接到要在頁面中顯示的嵌入網址。

我似乎無法得到$ scope.spotifySearch對象以字符串格式進入$ scope.playlisturi範圍。任何幫助，將不勝感激。

app.controller('MainCtrl', function ($scope, $sce, Spotify) { 

    $scope.spotifySearch = Spotify.search('Top 40', 'playlist').then(function (data) { 
    return (data.playlists.items[0].uri); 
    }); 

    $scope.trustSrc = function(src) { 
    return $sce.trustAsResourceUrl(src); 
    } 

    $scope.playlisturlfragment = "https://embed.spotify.com/?uri="; 
    $scope.playlisturi = $scope.spotifySearch; 
    $scope.playlisturl = {src:$scope.playlisturlfragment+$scope.playlisturi} 

}); 

Answer 1

您正在分配承諾到spotifySearch，我想你想要的是通過搜索返回的uri。

基本上有兩種解決這個問題的方法。

1. 解決承諾時將值賦給playlisturl。
2. 當spotifySearch更改時，將值指定爲playlisturl。

這是第一種方法。

$scope.playlisturlfragment = "https://embed.spotify.com/?uri="; 
Spotify.search('Top 40', 'playlist').then(function (data) { 
    $scope.playlisturl = {src:$scope.playlisturlfragment+data.playlists.items[0].uri} 
    }); 

另一種方法是觀察spotifySearch的變化。

$scope.playlisturlfragment = "https://embed.spotify.com/?uri="; 
Spotify.search('Top 40', 'playlist').then(function (data) { 
    $scope.spotifySearch = data.playlists.items[0].uri; 
    }); 

$scope.$watch('spotifySearch',function(value) { 
    if(!value) return; 
    $scope.playlisturl = {src:$scope.playlisturlfragment+value}; 
}); 

Answer 2

你分配的承諾你$scope.spotifySearch，而不是真正的數據（$http返回一個承諾）。相反，你可以這樣做：

app.controller('MainCtrl', function ($scope, $sce, Spotify) { 

    $scope.playlisturlfragment = "https://embed.spotify.com/?uri="; 
    $scope.playlisturl = { 
     src: "" 
    } 

    $scope.spotifySearch = Spotify.search('Top 40', 'playlist').then(function (data) { 
     // use the callback to assign the uri to your object 
     $scope.playlisturl.src = $scope.playlisturlfragment + data.playlists.items[0].uri; 
    }); 

}); 

Answer 3

角度使用承諾的請求。這個承諾是異步的，很快返回值然後不起作用。用於這種用途的回調函數爲：

app.controller('MainCtrl', function ($scope, $sce, Spotify) { 

    $scope.trustSrc = function(src) { 
     return $sce.trustAsResourceUrl(src); 
    }; 

    $scope.init = function(){ 
     $scope.search(function(uri){ 
      $scope.playlisturlfragment = "https://embed.spotify.com/?uri="; 
      $scope.playlisturl = {src:$scope.playlisturlfragment + uri}; 
     }); 
    }; 

    $scope.search = function(callback){ 
     $scope.spotifySearch = Spotify.search('Top 40', 'playlist').then(function (data) { 
      callback(data.playlists.items[0].uri); 
     }); 
    }; 
}); 

運行的外觀init方法這個例子